webpack-css-loader以及css-loader模块化

1.什么是css-loader

和图片一样webpack默认能不能处理CSS文件, 所以也需要借助loader将CSS文件转换为webpack能够处理的类型

2.css-loader使用:

2.1安装cssloader

npm install --save-dev css-loader

2.2安装styleloader

npm install style-loader --save-dev

2.3配置css-loader

{
    test: /\.css$/,
    use: [ 'style-loader', 'css-loader' ]
}

3.css-loader和style-loader作用

css-loader: 解析css文件中的@import依赖关系
style-loader: 将webpack处理之后的内容插入到HTML的HEAD代码中

4.css-loader开启模块化

默认情况下通过import "./xxx.css"导入的样式是全局样式
也就是只要被导入, 在其它文件中也可以使用
如果想要导入的CSS文件只在导入的文件中有效, 那么就需要开启CSS模块化

//打包css规则
            {
                test: /\.css$/,
                use:[
                    {
                        loader:"style-loader"
                    },
                    {
                        loader:'css-loader',
                        options:{
                            modules:true  //开启css-loader模块化
                        }
                    },
                    {
                        loader:'postcss-loader'
                    }
                ]
            },

然后在导入的地方通过 import xxx from "./xxx.css"导入
然后在使用的地方通过 xxx.className方式使用即可