在webpack 2.x中将autoprefixer与postcss一起使用

小编典典

在webpack 2.x中将autoprefixer与postcss一起使用

reactjs

如何autoprefixer与webpack 2.x 一起使用。

以前，以前是这样的…

...

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

...

但是，它不再起作用了。

如何将其重写为[email protected]？

阅读 321

2020-07-22

共1个答案

小编典典

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

webpack 2.x.x引入的webpack.LoaderOptionsPlugin()插件，您需要在其中定义所有加载程序选项插件。就像autoprefixer是的插件postcss- loader。所以，它必须去这里。

和

module.rules 取代 module.loaders
所有加载程序都应明确表示它们是加载程序。例如 loader: 'style!css'应该loader: 'style-loader!css-loader'

新的配置看起来像这样…

...

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

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

...

希望这对大家有帮助。

2020-07-22