Detailed Css-loader Configuration

Role

Css-loader is used to package CSS files into JS, often in conjunction with Style-loader, to package and insert CSS files into the page. As follows:

{test:/\.css$/, use: [{loader:' Style-loader '}, {loader:' Css-loader ', Options: {root:‘/‘,//Modify the URL in the CSS to point to the root directory, the default value is/, for the absolute path, Css-loader is not processed by defaultModulesfalse,//turn on Css-modules mode, default value is FlaseLocalidentname: ' [Name]-[local]-[hash:base64:5] ',//setting the name of the local class name in Css-modules modeMinimizefalse,//Compress CSS code, default falseCamelCase:false,//export the class name named for the hump, default falseImporttrue,//Disable or Enable @import, default TrueUrl:true,//disable or enable URL, default TrueSourcemap:false,//Disable or enable Sourcemap, default falseimportloaders:0,//number of loader applied before Css-loader, default is 0Alias: {}//alias, default {}            }        }    ]}

Implementing scope control of CSS classes

By default the function of the class in the CSS file, the first case is not to turn on Css-module mode

=

As you can see: The change of local (. Hide), when Css-nodule is turned on in Opitons, and the Localidentname: ' [Name]-[local]-[hash:base64:5] ', the result is as follows:

Detailed Css-loader Configuration