1. 程式人生 > >webpack.config.js====CSS相關:::css加載器

webpack.config.js====CSS相關:::css加載器

file let 配置 fig all clas node cnpm sta

1. 安裝:

//loader加載器加載css和sass模塊
cnpm install style-loader css-loader node-sass sass-loader --save-dev
//loader加載器加載css和less模塊
cnpm install style-loader css-loader less less-loader --save-dev


//樣式抽離文件 如果是webpack4.X 需要加@next
//現在webpack4.x支持mini-css-extract-plugin插件,但是目前不穩定
cnpm install --save-dev extract-text-webpack-plugin@next
cnpm install 
--save-dev mini-css-extract-plugin

2. webpack.config.js中使用

const extractTextWebpackPlugin = require(extract-text-webpack-plugin);
let cssExtract = new extractTextWebpackPlugin({
    filename: css/index.css,
    disable: false
});
let sassExtract = new extractTextWebpackPlugin({
    filename: 
css/public.css, disable: false });

        rules: [
            //配置css加載器
            {

                test: /\.css$/,
                use: cssExtract.extract({
                    fallback: "style-loader",
                    use: ["css-loader", "postcss-loader"]
                })
            },
            //配置sass加載器
            {
                test: /\.scss$/,
                use: sassExtract.extract({
                    fallback: ‘style-loader‘,
                    use: [‘css-loader‘, "postcss-loader", ‘sass-loader‘]
                })
            },
        ]

webpack.config.js====CSS相關:::css加載器