This article mainly introduces the Webpack project easy to mix CSS module method, the content is very good, now share to everyone, but also for everyone to make a reference.
Objective
This article css-loader
describes css模块
how to create a conflict with a style file in a referenced NPM package after the feature is turned on.
such as antd-mobilenpm
the introduction of the package. Without special treatment, the style file will be translated css module
.
First, the cause of the problem
{ test:/\.css$/, use : [ ' Style-loader ', { loader: ' Css-loader ', options: { Modules:true, localidentname: ' [Hash:base64:6] ' } }, ' Postcss-loader ' }
The code snippet above is excerpted from the Webpack configuration of Module.rule.
You can see that wepack in the process of compiling, encountered the. css end of the file, will be referred to Postcss-loader, Css-loader and style-loader in turn processing.
Because Css-loader opens the CSS module function, the class name will be changed for all processed CSS files.
Second, the preliminary improvement
Use exclude and include to differentiate
1.node_module files within the folder to avoid being processed by the current rule
{ test:/\.css$/, use : [ { loader: ' Style-loader ' }, { loader: ' Css-loader ', Options: { modules:true, localidentname: ' [Hash:base64:6] ' } }, { loader: ' Postcss-loader ' } ], exclude:[path.resolve (__dirname, '.. ', ' Node_modules ')]}
As shown above, the files within the Node_module folder are excluded with exclude and are not processed by the current rule.
2. Handle CSS files in Node_module separately
{ test:/\.css$/, use : [ { loader: ' Style-loader ' }, { loader: ' Css-loader ' }, { loader: ' Postcss-loader ' } ], include:[path.resolve (__dirname, '.. ', ' Node_modules ')]}
Third, upgrade version, support CSS module mode and normal mode of mixing
1. Distinguish two modes with file names
*.global.css Normal Mode
*.css CSS Module mode
This is the unified use of global keywords to identify.
2. Matching files with regular expressions
CSS module{ test:new RegExp (' ^ (?!. *\\.global). *\\.css '), use : [ { loader: ' Style-loader ' }, { loader: ' Css-loader ', Options: { modules:true, localidentname: ' [Hash:base64:6] ' } }, { loader: ' Postcss-loader ' } ], exclude:[path.resolve (__dirname, ' ... ', ' node_modules ')]}//Normal mode { test: New RegExp (' ^ (. *\\.global). *\\.css '), use : [ { loader: ' Style-loader ' }, { loader: ' Css-loader ', }, { loader: ' Postcss-loader ' } ], exclude:[path.resolve (__dirname, ' .. ', ' Node_modules ')]}
Iv. Other issues
Less when using CSS module, the parsing of URLs conflicts, can be resolved with Resolve-url-loader, directly on the code:
Test:/\.less/,use: [ { loader: "Style-loader" }, { loader: "Css-loader", options: { Sourcemap:true, importloaders:2 } }, { loader: "Postcss-loader", options: { Sourcemap:true } }, { loader: "Resolve-url-loader", options: { sourcemap:true } }, { loader: "Less-loader", options: { sourcemap:true } }]
The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!