一.安裝css-loader

1.開發(fā)環(huán)境安裝css-loader

npm i css-loader -D 

2.在webpack.config.js中引入css-loader(三種方法)

const path = require('path')
module.exports = {
    entry : './src/main.js',
    output: {
        "filename": "build.js",
        "path": path.resolve(__dirname,'build')
    },
    module:{
        rules:[  //如下三種方法
//方法1
            /*{
                test: /\.css$/,  //一般就是一個正則表達式，用于匹配我們需要處理的文件類型
                use:[
                    {
                        loader: 'css-loader'
                    }
                ]
            },*/
//方法2
            /*{
                test: /\.css$/,  //一般就是一個正則表達式，用于匹配我們需要處理的文件類型
                loader: 'css-loader'
            },*/
//方法3
            {
                test: /\.css$/,  //一般就是一個正則表達式，用于匹配我們需要處理的文件類型
                use: ['css-loader']
            }
        ]
    }
}

3.引入后npm run build，仍然無法顯示樣式，什么原因？
因為沒有安裝style-loader

image.png

二.安裝style-loader

1.開發(fā)環(huán)境安裝style-loader

npm i style-loader -D 

2.在webpack.config.js中引入style-loader
默認規(guī)則：引入的loader從下往上，從右往左掃描

const path = require('path')
module.exports = {
    entry : './src/main.js',
    output: {
        "filename": "build.js",
        "path": path.resolve(__dirname,'build')
    },
    module:{
        rules:[
            {
                test: /\.css$/,  //一般就是一個正則表達式，用于匹配我們需要處理的文件類型
                use: ['style-loader','css-loader']
            }
        ]
    }
}

3.引入css-loader和style-loader后npm run build，正常顯示

image.png