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