webpack.config.js====CSS相关：postcss-loader加载器，自动添加前缀

1. 在webpack中加载css需要先安装style-loader 和 css-loader

 

cnpm install --save-dev style-loader css-loader

 

2. 在webpack中使用postcss自动添加厂商前缀；

cnpm install postcss-loader autoprefixer --save-dev

3. 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']
                })
            },
        ]

 4. 在根目录下面创建一个postcss.config.js文件，并配置如下

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

 

转载于:https://www.cnblogs.com/songxia/p/10295795.html