postcss-loader加載器，自動添加前綴

更多內容已經遷移至掘金，歡迎來指導學習：

https://juejin.im/post/5d64c72a6fb9a06af372c707

 

 

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