在 webpack 2.x 中使用带有 postcss 的 autoprefixer

本文介绍了在 webpack 2.x 中使用带有 postcss 的 autoprefixer的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何在 webpack 2.x 中使用 autoprefixer.

How to use autoprefixer with webpack 2.x.

以前，它曾经是这样的......

Previously, it used to be something like this...

...

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

...

但是，它不再起作用了.

But, it's not working anymore.

如何改写成[email protected]?

How to rewrite it to [email protected]?

Webpack 2.x.x 是杀手和构建破坏者

webpack 2.x.x 引入了 webpack.LoaderOptionsPlugin() 插件，您需要在其中定义所有加载器选项插件.比如，autoprefixer 是 postcss-loader 的插件.所以，它必须到这里.

Webpack 2.x.x is a killer and a build breaker

webpack 2.x.x introduced webpack.LoaderOptionsPlugin() plugin where you need to define all the loader option plugins. Like, autoprefixer is a plugin for postcss-loader. So, it has to go here.

和

module.rules 替换 module.loaders
所有加载器都应该明确说明它们是加载器.前任.loader: 'style!css' 应该是 loader: 'style-loader!css-loader'

module.rules replaces module.loaders
All the loaders should have explicitly say that they are a loader. Ex.loader: 'style!css' should be loader: 'style-loader!css-loader'

新配置看起来像这样...

The new config will look something like this...

...

module: {
  rules: [
     {
       test: /\.scss$/,
       loaders: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader']
     }
   ]
},

plugins: [
  new webpack.LoaderOptionsPlugin({
    options: {
      postcss: [
        autoprefixer(),
      ]
     }
  })
],

...

希望对大家有帮助.

这篇关于在 webpack 2.x 中使用带有 postcss 的 autoprefixer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

loaders