webpack-style-loader

'window is not defined' error when using style-loader with webpack

由 主宰稳场 提交于 2019-12-05 01:29:26
Building a server side react app and while using Webpack I am having issues with Style-Loader. I am using version "^0.23.1" and when running a script to bundle and build there is an issue from Style-Loader. The issue is window is not defined webpack:///./node_modules/style-loader/lib/addStyles.js?:23 return window && document && document.all && !window.atob; Has anyone run into this issue? After looking through Stack and the Github issues for style-loader I am not finding any solution. Here is my webpack file: const path = require('path'); const webpack = require('webpack'); module.exports = {

How do you use withStyles (isomorphic style loader) when your className has a dash in it?

由 为君一笑 提交于 2019-12-04 20:31:03
Let's say this is your SCSS: .someclass { background: red; height: 1500px; width: 10000px; } And this is how you use it: import React, { Component, PropTypes } from 'react' import ReactDropZone from 'react-dropzone' import ReactDOM from 'react-dom' import withStyles from 'isomorphic-style-loader/lib/withStyles' import s from './ImageTool.scss' class ImageTool extends Component { render() { return ( <div className={s.someclass}></div> ) } } export default withStyles(ImageTool, s) So this works well. Now what happens if you need to name your class some-class ? Clearly className={s.some-class}

Unable to resolve absolute url() paths for background images in CSS with Webpack

由 大兔子大兔子 提交于 2019-12-04 11:44:06
问题 I have the following Webpack config (roughly, it has been simplified for this post): const rootPublic = path.resolve('./public'); const LOCAL_IDENT_NAME = 'localIdentName=[name]_[local]_[hash:base64:5]'; const CSS_LOADER = `css?sourceMap&${LOCAL_IDENT_NAME}&root=${rootPublic}`; const SASS_LOADER = 'sass?sourceMap&includePaths[]=' + path.resolve(__dirname, './src/styles'); // ... loaders: loaders: [ { test: /\.(jpe?g|png|gif|svg)$/, loader: 'url-loader?limit=10000&name=[path][name].[ext]' }, {

Webpack loader aliases?

由 拟墨画扇 提交于 2019-12-04 03:35:43
I have a fairly complicated loader setup for style sheets: { test: /\.scss$/, loader: ExtractTextPlugin.extract("style", "css?sourceMap&localIdentName=[path][name]__[local]__[hash:base64:5]!sass?outputStyle=expanded&" + "includePaths[]=" + other stuff) ) } Which works great, but on some requires I want to add the modules option to css-loader, so it'd look like this: require('./foo.scss!css?modules&sourceMap&localIdentName=[path][name]__[local]__[hash...'); But I can't do this all over the place. How can I configure this so that I can enable the css-loader modules flag on certain requires while

webpack loaders and include

由 流过昼夜 提交于 2019-12-03 14:29:57
问题 I'm new to webpack and I'm trying to understand loaders as well as its properties such as test, loader, include etc. Here is a sample snippet of webpack.config.js that I found in google. module: { loaders: [ { test: /\.js$/, loader: 'babel-loader', include: [ path.resolve(__dirname, 'index.js'), path.resolve(__dirname, 'config.js'), path.resolve(__dirname, 'lib'), path.resolve(__dirname, 'app'), path.resolve(__dirname, 'src') ], exclude: [ path.resolve(__dirname, 'test', 'test.build.js') ],

Webpack [url/file-loader] is not resolving the Relative Path of URL

由 天涯浪子 提交于 2019-12-03 07:04:11
I am facing a problem in Webpack regarding Relative Path. Let me try to explain the scenario : I have 2 separate project in Workspace directory : Project-A [Bundling using Gulp] : Stable & Working Project-B [Bundling using Webpack] : New project As both the projects are using same Styling, so I wanted to reuse the SCSS files [consisting of standard variables, predefined layouts, modals, classes etc] of Project A into Project B . Now, if I am trying to import Project-A index.scss in Project-B index.scss as another partial [ Commenting out the Background Image URL Depency ], webpack is able to

cannot load png files with webpack, unexpected character

由 跟風遠走 提交于 2019-12-03 06:36:32
问题 Im trying to reconfigure my webpack, and now i cannot load the css files. i keep my styles in src > styles > main.css I am getting errors such as ERROR in ./src/images/NavIcon03.png Module build failed: SyntaxError: /Users/myname/work/site/src/images/NavIcon03.png: Unexpected character '�' (1:0) Here is my webpack configuration var webpack = require('webpack') module.exports = { entry: [ './src/main.js' ], output: { path: __dirname, publicPath: '/', filename: 'bundle.js' }, module: { loaders:

Import CSS from “node_modules” in Webpack

由 我是研究僧i 提交于 2019-12-03 04:30:59
Some third-party modules I'm using have their own CSS files. I'd like to include them in my app's one, single CSS file, which is processed by Webpack. How can CSS files under "node_modules" be imported into my CSS file? For example, I'm using the third-party react-select module, but I can't import its CSS file from node_modules : @import 'react-select/dist/react-datetime.css'; The relevant loader in webpack.config.js : { test: /\.css$/, use: ExtractTextPlugin.extract({ use: [ { loader: 'css-loader', options: { url: false } } ] }) } Andy Ray You can import files relative to your project's root

cannot load png files with webpack, unexpected character

由 十年热恋 提交于 2019-12-02 20:14:29
Im trying to reconfigure my webpack, and now i cannot load the css files. i keep my styles in src > styles > main.css I am getting errors such as ERROR in ./src/images/NavIcon03.png Module build failed: SyntaxError: /Users/myname/work/site/src/images/NavIcon03.png: Unexpected character '�' (1:0) Here is my webpack configuration var webpack = require('webpack') module.exports = { entry: [ './src/main.js' ], output: { path: __dirname, publicPath: '/', filename: 'bundle.js' }, module: { loaders: [{ exclude: /node_modules/, loader: 'babel' }, { test: /\.css$/, // Only .css files loader: 'style!css

Webpack 1.12: Bundle css files

由 蓝咒 提交于 2019-12-02 03:26:18
I'm successfully bundling .js files and processing them correctly with the loaders. My current config is here: "use strict"; var webpack = require("webpack"); module.exports = { entry: { main: 'main.js', vendor: ["fixed-data-table","react","react-dom","jquery", "bootstrap"], }, output: { path: "../resources/public", filename: 'bundle.js' }, plugins: [ new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"static/vendor.bundle.js"), new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }), ], module: { loaders: [ { test: /.js?$/, loader: 'babel-loader', exclude:
订阅 webpack-style-loader