Webpack method of mixing CSS module

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

1. *.global.css Normal Mode

2. *.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!

Related recommendations:

Webpack separating CSS and packaging separately