解决wepacke配置postcss-loader时autoprefixer失效问题

今天在配置postcss-loader，使用autoprefixer发现根本没有用。

postcss.config.js中是这样的：

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

然后打包也没报错，只是没有起任何作用，一些需要加前缀的地方毫无变化。没作用岂不是白配了。然后我又去搜索如何解决autoprefixer失效问题，发现还需要配置兼容的浏览器。我又按照方法在postcss.config.js中配置。

module.exports = {plugins:[require('autoprefixer')({"browsers": ["defaults","not ie < 8","last 2 versions","> 1%","iOS 7","last 3 iOS versions"]})]
}

这里兼容浏览器的版本可以自己设置。

然后打包，结果成功，该添加的前缀都添加了。但是却有一段警告：

 虽然不影响结果，可这红的黄的提示对我们程序员来说十分不友好呀，所以我一定要干掉它。我用我蹩脚的英语理解了一下大概意思，就是使用  browserslist去替换browsers。browserslist不是添加在postcss.config.js中，而是添加在package.json中。这样做是为了避免browsers可能会导致的错误。所以要想完美解决，就需要这样：

postcss.config.js

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

package.json

 "browserslist": ["defaults","not ie < 8","last 2 versions","> 1%","iOS 7","last 3 iOS versions"],

这段加在author，keywords同一级

1
2
3
4
5

module.exports = {plugins: {"postcss-preset-env": {}}
};

1
2
3
4
5
6
7
8

:root {--mainColor: #12345678;
}body {color: var(--mainColor);display: flex;
}

1

npx postcss index.css --output index.compiled.css

1
2
3
4
5
6
7
8
9

:root {--mainColor: rgba(18,52,86,0.47059);
}body {color: rgba(18,52,86,0.47059);color: var(--mainColor);display: flex;
}

1
2
3
4
5
6
7

module.exports = {plugins: {"postcss-preset-env": {stage: 0}}
};