css-loader

问题 I use webpack and css-loader , and in my css-loader config I use these options: options: { importLoaders: 1, modules: true, localIdentName: '[hash:base64:3]' } Just like you see, it is obvious that I desire all of my class name will have 3 characters, and after build absolutely my desire come true but there is a very big issue. Some class names has same name! (conflict!) for example: ._1mk { /*dev name was .home*/ color: red; } /*line 90*/ and ._1mk { /*dev name was .news*/ color: blue; }

问题 I'm currently using the below Webpack config to import and parse the SCSS imports I make in my React components. The crux of my issue is with the CSS part of the config. Currently, I'm importing SCSS files using their absolute file paths in their relevant React components. However on render, each individual CSS import gets their own <style> tag which results in a dozen <style> tags littered in the head of my web app. Is there a way to tweak the config such that the outputted CSS goes into one

问题 I'm fairly new to webpack but having some problems with css-loader or file-loader. I'm trying to load a background-image but it doesn't work quite right. The background-image isn't shown, even though the devtools show the background-image style. If I copy the background-image style to the element.style block, everything works fine. Am I making a stupid mistake somewhere? The body tag should have a background image. The style appears in the developer tools and there are no errors: I can load

问题 Below is my webpack.config.js and the package.json module.exports = { entry: "./entry.js", output: { filename: "./build/js/bundle.js" }, module: { rules: [ { test: /.\js$/, use: [ { loader: 'babel-loader', options: { presets: ["es2015"] } } ] }, { test: /.\css?$/, include: __dirname + "./src/css", exclude: __dirname + "./src/js", use: [ 'style-loader', { loader: 'css-loader', options: { modules: true } } ] } ] }, plugins: [ // new UglifyJsPlugin() ] } "dependencies": { "ajv-keywords": "^3.1.0

问题 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" /

问题 I am making my first steps in using webpack...so far not very successful. In my .css file, there is a image background defined with a url: background-image: url("patterns/header-profile.png"); The app spectacularly craches on launch with this error : ERROR in ./~/css-loader?"modules":true,"sourceMap":true,"importLoaders":1,"localIdentName":"[local]__[hash:base64:5]"}!./~/postcss-loader!./src/assets/css/in spinia.css Module not found: Error: Can't resolve 'patterns/header-profile.png' in 'C:\-

问题 I'm trying to make semantic-ui-react library to work with CSS module. My application uses babel-plugin-css-module . This is my css-loader configuration { test: /\.css$/i, use: [ { loader: ExtractCssChunks.loader, options: { hot: true } }, { loader: "css-loader", //generating unique classname options: { importLoaders: 1, // if specifying more loaders modules: true, sourceMap: true, localIdentName: "[path]___[name]__[local]___[hash:base64:5]" //babel-plugin-css-module format //localIdentName: "

问题 # MyComponent.js import React from 'react' import './MyComponentStyle.css' export default class MyComponent extends React.Component { .... } # App.js import React from 'react' import ReactDOM from 'react-dom' import { Route, Switch, BrowserRouter } from 'react-router-dom' import MyComponent from './MyComponent' import PageNotFound from './PageNotFound' ReactDOM.render( <BrowserRouter> <Switch> <Route exact path='/mycomponent' component={MyComponent}/> <Route component={PageNotFound} /> <

问题 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

问题 Importing style from css files. Returning empty object. Seems css-loader is not working correctly. Can anyone help me on this. Please find the reference files below index.js import React from 'react' import style from './header.css' console.log(style) // Returning empty object export default class Header extends React.PureComponent { render() { return( <header className = {style.header}> This is header component </header> ) } } ./header.css .header { background: #007DC6; } ./webpack.config.js