webpack-style-loader

window is not defined ( webpack and reactJS )

夙愿已清 提交于 2019-12-12 12:14:58
问题 The program runs correctly. But when I import an css file into the component, I encounter the following error. webpack:///./node_modules/style-loader/lib/addStyles.js?:23 return window && document && document.all && !window.atob; ^ ReferenceError: window is not defined at eval (webpack:///./node_modules/style-loader/lib/addStyles.js?:23:2) at eval (webpack:///./node_modules/style-loader/lib/addStyles.js?:12:46) at module.exports (webpack:///./node_modules/style-loader/lib/addStyles.js?:57:46)

How to configure webpack to generate multiple CSS theme files?

让人想犯罪 __ 提交于 2019-12-12 08:07:32
问题 I have multiple theme files, which are basically SASS files with different variables that specify colors, fonts etc. specific to each theme. The rest of the SASS files in the project use these variables in their CSS rules. I would like to configure webpack in such a way that it will generate 1 CSS file for each theme file. For example: main.scss: body { background-color: $theme-specific-color; } theme1.scss: $theme-specific-color: blue; theme2.scss: $theme-specific-color: green; The desired

React Server side rendering of CSS modules

可紊 提交于 2019-12-12 07:09:41
问题 The current practice for CSS with React components seems to be using webpack's style-loader to load it into the page in. import React, { Component } from 'react'; import style from './style.css'; class MyComponent extends Component { render(){ return ( <div className={style.demo}>Hello world!</div> ); } } By doing this the style-loader will inject a <style> element into the DOM. However, the <style> will not be in the virtual DOM and so if doing server side rendering, the <style> will be

Webpack Less-Loader with Style-Loader not injecting <style> tag

霸气de小男生 提交于 2019-12-11 14:33:57
问题 I'm trying to have our .less files picked up by less-loader , then by css-loader , and finally injected into the HTML file by style-loader , as per the Less Loader docs. I am not getting any errors or warnings, but the styles are not injected or present in any way. My webpack config is as follows, under module.rules[]...: { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.less$/, use: [{ loader: "style-loader" // creates style nodes from JS strings }, { loader: "css-loader" /

Webpack 2 sass-loader Unexpected character '@'

試著忘記壹切 提交于 2019-12-11 08:49:33
问题 i have the next webpack 2 rules configuration when run webpack throwed the next error: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type. | @media screen and (min-width: 40em) { | .feature { | margin-bottom: 8.75rem; @ ./~/style-loader?{"camelCase":true,"localIdentName":"[name]_[local]_[hash:base64:3]","modules":true}!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader?{"sourceMap":true,"outputStyle":"expanded","include":["/opt/inmoblex/current

Webpack not copying css into dist

白昼怎懂夜的黑 提交于 2019-12-10 11:46:57
问题 I have the following css files: <link rel="stylesheet" href="style/select.css"> <link rel="stylesheet" href="style/site.css"> and the following webpack config var path = require("path"); module.exports = { entry: { app: './src/index.js' }, output: { path: path.resolve(__dirname + '/dist'), filename: '[name].js', }, module: { rules: [ { test: /\.(css|scss)$/, use: [ 'style-loader', 'css-loader', ] }, { test: /\.html$/, exclude: /node_modules/, loader: 'file-loader?name=[name].[ext]', }, { test

Webpack loader aliases?

岁酱吖の 提交于 2019-12-09 16:18:10
问题 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

webpack Can't resolve 'style'

房东的猫 提交于 2019-12-08 15:44:54
问题 I was trying to follow the simple Getting Started from (http://webpack.github.io/docs/tutorials/getting-started/). And I am getting this error when I try to load style.css. ERROR in ./entry.js Module not found: Error: Can't resolve 'style' in 'Path to project in my computer' BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders. You need to specify 'style-loader' instead of 'style'. @ ./entry.js 1:0-22 Any ideas ? I installed css-loader and style-loader

Cant Import CSS files into React Project

℡╲_俬逩灬. 提交于 2019-12-07 15:28:46
问题 when i tried to import css file it showed error that loaders are missing. so i have installed css-loader and style-loader packages. if i add those packages to webpack.config.js i get following error. i dont know how to resolve it. ERROR in ./node_modules/css-loader!./src/index.js Module build failed: Unknown word (1:1) > 1 | import React from 'react'; | ^ 2 | import ReactDOM from 'react-dom'; 3 | import {App} from './components/App'; 4 | @ ./src/index.js 3:14-73 @ multi (webpack)-dev-server

Testing Webpack built React components with Jest

孤者浪人 提交于 2019-12-07 02:35:57
问题 I have come across a problem where I need to run Jest tests on a React application that is being built by Webpack. The problem is handling the require of CSS files and images etc that Webpack would usually process with a loader. I need to know about what is the best approach to test my components correctly. The React component: import React from 'react'; // The CSS file is the problem as I want to actually test what it // returns after webpack has built it. import style from './boilerplate