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方式使用即可