在webpack 2.x中将自动修复程序与postcss一起使用
在webpack 2.x中将自动修复程序与postcss一起使用
提问于 2016-11-23 18:12:41
如何在webpack 2.x中使用autoprefixer。
以前，通常是这样的……
...
module: {
loaders: [
{
test: /\.scss$/,
loader: 'style!css!sass!postcss'
}
]
},
postcss: () => {
return [autoprefixer]
},
...但是，它不再起作用了。
如何重写为webpack@2.x.x？
回答 2
Stack Overflow用户
发布于 2017-04-08 06:24:26
不再需要使用LoaderOptionsPlugin。现在，您可以将选项直接传递给加载器声明。
const autoprefixer = require('autoprefixer');
let settings = {
/*...*/
module: {
rules: [{
test: /\.css$/,
use: [
/*...other loaders...*/
{
loader: 'postcss-loader',
options: {
plugins: function () {
return [autoprefixer]
}
}
}
/*...other loaders...*/
]
}]}
}
/*...*/
};如果需要提供具体的兼容性配置，可以将其作为参数传递给autoprefixer函数：
options: {
plugins: function () {
return [autoprefixer('last 2 versions', 'ie 10')]
}
}Stack Overflow用户
发布于 2017-07-21 07:11:53
截至2017年7月20日，为了使用Webpack v2.4.1设置Autoprefixer，我执行了以下操作：
安装必要的加载器：
yarn add -D postcss-loader autoprefixer style-loader sass-loader css-loader在项目的根目录下创建一个postcss.config.js文件：
module.exports = {
plugins: [
require('autoprefixer')
]
};在根级package.json中，指定要支持的浏览器：
"browserslist": ["defaults", "not ie < 11"]在您的webpack.config.js文件的module.rules中，使用postcss-loader在css-loader后面指定您的加载器(我也使用scss)：
{
test: /\.scss$/,
use: [
{
loader: 'style-loader' // Adds CSS to the DOM by injecting a <style> tag
},
{
loader: 'css-loader' // interprets @import and url() like import/require() and will resolve them.
},
{
loader: 'postcss-loader', // postcss loader so we can use autoprefixer
options: {
config: {
path: 'postcss.config.js'
}
}
},
{
loader: 'sass-loader' // compiles Sass to CSS
}
],
},页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40761473
复制相关文章
相似问题
腾讯云开发者
