首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在webpack 2.x中将自动修复程序与postcss一起使用

在webpack 2.x中将自动修复程序与postcss一起使用
EN

Stack Overflow用户
提问于 2016-11-23 18:12:41
回答 2查看 18K关注 0票数 22

如何在webpack 2.x中使用autoprefixer

以前,通常是这样的……

代码语言:javascript
复制
...

module: {
  loaders: [
     {
       test: /\.scss$/,
        loader: 'style!css!sass!postcss'
     }
   ]
},
postcss: () => {
  return [autoprefixer]
},

...

但是,它不再起作用了。

如何重写为webpack@2.x.x?

EN

回答 2

Stack Overflow用户

发布于 2017-04-08 06:24:26

不再需要使用LoaderOptionsPlugin。现在,您可以将选项直接传递给加载器声明。

代码语言:javascript
复制
const autoprefixer = require('autoprefixer');

let settings = {
    /*...*/
    module: {
        rules: [{
            test: /\.css$/,
            use: [
                /*...other loaders...*/
                {
                    loader: 'postcss-loader',
                    options: {
                        plugins: function () {
                            return [autoprefixer]
                        }
                    }
                }
                /*...other loaders...*/
            ]
        }]}         
    }
    /*...*/
};

如果需要提供具体的兼容性配置,可以将其作为参数传递给autoprefixer函数:

代码语言:javascript
复制
options: {
    plugins: function () {
        return [autoprefixer('last 2 versions', 'ie 10')]
    }
}
票数 26
EN

Stack Overflow用户

发布于 2017-07-21 07:11:53

截至2017年7月20日,为了使用Webpack v2.4.1设置Autoprefixer,我执行了以下操作:

安装必要的加载器:

代码语言:javascript
复制
yarn add -D postcss-loader autoprefixer style-loader sass-loader css-loader

在项目的根目录下创建一个postcss.config.js文件:

代码语言:javascript
复制
module.exports = {
  plugins: [
    require('autoprefixer')
  ]
};

在根级package.json中,指定要支持的浏览器:

代码语言:javascript
复制
"browserslist": ["defaults", "not ie < 11"]

在您的webpack.config.js文件的module.rules中,使用postcss-loadercss-loader后面指定您的加载器(我也使用scss):

代码语言:javascript
复制
  {
    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
      }
    ],
  },
票数 18
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/40761473

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档