詳解css-loader配置

做用

css-loader用於將css文件打包到js中, 經常配合style-loader一塊兒使用，將css文件打包並插入到頁面中。以下：

{
    test: /\.css$/,
    use: [
        {
            loader: 'style-loader'
        },
        {
            loader: 'css-loader',
            options: {
                root: '/', //修改css中url指向的根目錄, 默認值爲/, 對於絕對路徑, css-loader默認是不會對它進行處理的
                modules: false, //開啓css-modules模式, 默認值爲flase
                localIdentName: '[name]-[local]-[hash:base64:5]', //設置css-modules模式下local類名的命名
                minimize: false, //壓縮css代碼, 默認false
                camelCase: false, //導出以駝峯化命名的類名, 默認false
                import: true, //禁止或啓用@import, 默認true
                url: true, //禁止或啓用url, 默認true
                sourceMap: false, //禁止或啓用sourceMap, 默認false
                importLoaders: 0, //在css-loader前應用的loader的數目, 默認爲0
                alias: {} //起別名, 默認{}
            }
        }
    ]
}

實現css類的做用域控制

默認狀況下css文件中的類的做用, 第一種狀況是不開啓css-module模式

 => 

能夠看出 :local(.hide)的變化，當在opitons中開啓css-nodule, 而且設置 localIdentName: '[name]-[local]-[hash:base64:5]'時，結果以下：