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. 


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

 

posted @ 2019-01-20 18:54  songxia777  阅读(1536)  评论(0编辑  收藏  举报