preface

This article describes how csS-loader can enable CSS module functions without conflict with the style files in the referenced NPM package. Such as the introduction of the ANTD-MobilenPM package. Without special processing, the style file will be translated into CSS Modules.

First, the cause of the problem

{ 
    test: /\.css$/.use: [
        'style-loader',
        {
            loader: 'css-loader'.options: {
                modules: true.localIdentName: '[hash:base64:6]'}},'postcss-loader']}Copy the code

The above code snippet is taken from the Module. rule of the WebPack configuration. It can be seen that during the compilation process, wepack will submit files with the end of. CSS to PostCSs-loader, CSS-loader, and style-loader. Because csS-loader enables the CSS module function, the class names of all processed CSS files will be changed.

Two, preliminary improvement

Use exclude and include to distinguish

1.node_moduleFolder files to avoid being currentruleTo deal with

{ 
    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')]}Copy the code

As shown above, exclude files in the node_module folder and exclude the current rule.

2. Do it separatelynode_moduleInside the CSS file

{ 
    test: /\.css$/.use: [{loader: 'style-loader'
        },
        {
            loader: 'css-loader'
        },
        {
            loader: 'postcss-loader'}].include:[path.resolve(__dirname, '.. '.'node_modules')]}Copy the code

Three, upgraded version, supportcss moduleMode and normal mode are used together

1. Use file names to distinguish between the two modes

  • *.global.css Normal mode
  • *.css CSS module mode

Here, global keywords are used for identification.

2. Match 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')]}// Common mode
{ 
    test: new RegExp(`^(.*\\.global).*\\.css`),
    use: [{loader: 'style-loader'
        }，
        {
            loader: 'css-loader'}, {loader: 'postcss-loader'}].exclude:[path.resolve(__dirname, '.. '.'node_modules')]}Copy the code

Other issues

Resolve-url-loader: Resolve-url-loader: resolve-url-loader: resolve-url-loader: resolve-url-loader: resolve-url-loader: resolve-url-loader


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}}]Copy the code

reference

[1] Updated README regarding relative filepaths issue #121