PostCSS是一個(gè) CSS 的預(yù)處理工具灵临，可以幫助我們：給 CSS3 的屬性添加前綴，樣式格式校驗(yàn)（stylelint），提前使用 css 的新特性比如：表格布局翁脆，更重要的是可以實(shí)現(xiàn) CSS 的模塊化训挡，防止 CSS 樣式?jīng)_突澳骤。
我們常用的就是使用 PostCSS 進(jìn)行添加前綴，以此為例：
安裝
npm i -D postcss-loader
npm install autoprefixer --save-dev
# 以下可以不用安裝
# cssnext可以讓你寫(xiě)CSS4的語(yǔ)言澜薄，并能配合autoprefixer進(jìn)行瀏覽器兼容的不全为肮，而且還支持嵌套語(yǔ)法
$ npm install postcss-cssnext --save-dev
# 類(lèi)似scss的語(yǔ)法，實(shí)際上如果只是想用嵌套的話有cssnext就夠了
$ npm install precss --save-dev
# 在@import css文件的時(shí)候讓webpack監(jiān)聽(tīng)并編譯
$ npm install postcss-import --save-dev
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, './dist')
},
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
sourceMap: true,
plugins: loader => [
require('autoprefixer')({ browsers: ['> 0.15% in CN'] }) // 添加前綴
]
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
}
]
}
};
設(shè)置完成之后在css文件中增加
display: flex;
增加前綴之后的效果
如果有報(bào)下列錯(cuò)誤：是因?yàn)榘姹靖吡朔艟靡薷?/h4>
Replace Autoprefixer browsers option to Browserslist config.
Use browserslist key in package.json or .browserslistrc file.
Using browsers option cause some error. Browserslist config
can be used for Babel, Autoprefixer, postcss-normalize and other tools.
If you really need to use option, rename it to overrideBrowserslist.
Learn more at:
https://github.com/browserslist/browserslist#readme
https://twitter.com/browserslist
將plugins中的browsers更改為overrideBrowserslist即可颊艳，栗子如下：
{
loader: 'postcss-loader', options: {
indet: 'postcss',
sourceMap: true,
plugins: (loader) => [
require('autoprefixer')({overrideBrowserslist: ['> 0.15% in CN']})
]
}
}
Replace Autoprefixer browsers option to Browserslist config.
Use browserslist key in package.json or .browserslistrc file.
Using browsers option cause some error. Browserslist config
can be used for Babel, Autoprefixer, postcss-normalize and other tools.
If you really need to use option, rename it to overrideBrowserslist.
Learn more at:
https://github.com/browserslist/browserslist#readme
https://twitter.com/browserslist
將plugins中的browsers更改為overrideBrowserslist即可颊艳，栗子如下：
{
loader: 'postcss-loader', options: {
indet: 'postcss',
sourceMap: true,
plugins: (loader) => [
require('autoprefixer')({overrideBrowserslist: ['> 0.15% in CN']})
]
}
}
