带有 webpack 的 css 自动前缀

Question

我一直在尝试使用 LESS 和 Autoprefixer 配置 webpack，但 autoprefixer 似乎不起作用。我的 css 或更少的文件没有自动添加前缀。例子： display: flex留display: flex

我已将我的 webpack 配置放在下面：

var autoprefixer = require('autoprefixer');

module.exports = {
  entry: {
    bundle: "./index.jsx"
  },
  output: {
    path: __dirname,
    filename: "[name].js"
  },
  module: {
    loaders: [
      {
        test: /\.jsx$/,
        exclude: /(node_modules|bower_components)/,
        loaders: ['react-hot', 'babel-loader']
      },
      {
        test: /\.less$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader!less-loader")
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader")
      }

    ],
    postcss: function () {
      return [autoprefixer];
    }
  },
  plugins: [
    new webpack.BannerPlugin(banner),
    new ExtractTextPlugin("style.css")
  ],
  devtool: 'source-map',
  devServer: {
    stats: 'warnings-only',
  }
};

Answer 1

正如Autoprefixer documentation 中所写，“Autoprefixer 使用 Browserslist”

根据Browserslist documentation，建议将浏览器列表放在package.json。

所以这是另一种在 webpack 中使用 autoprefixer 的方法：

安装 postcss-loader 和 autoprefixer：

npm i -D postcss-loader autoprefixer

webpack.config.js

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

根据postcss documentation，postcss-loader 应该放在css-loader 和style-loader 之后，但在其他预处理器加载程序之前，例如sass|less|stylus-loader，如果你使用任何的话。

package.json

"postcss": {
  "plugins": {
    "autoprefixer": {}
  }
},
"browserslist": [
  "last 2 version",
  "not dead",
  "iOS >= 9"
]

这样，您就不需要postcss.config.js 文件了。

Answer 2

所以发现了问题。傻我，postcss 块需要直接在 webpack 配置下，我把它放在 modules 块中。我的坏。

编辑：应该是这样的：

var autoprefixer = require('autoprefixer');

module.exports = {
    ...
    postcss: function () {
        return [autoprefixer];
    }
    ...
};

所以我没有把它放在模块块中，而是把它直接放在主块下面，如上所示。

Answer 3

您需要在 webpack 配置中为旧版浏览器设置 postcss。

autoprefixer 的默认值是浏览器的最后 2 个版本或拥有至少 5% 市场份额的浏览器。

https://github.com/postcss/autoprefixer#browsers

  postcss: [
    autoprefixer({
      browsers: ['last 3 versions', '> 1%']
    })
  ],

它表示您支持最后 3 个版本的浏览器或至少拥有 1% 市场份额的浏览器。

Answer 4

我在使用 Webpack 2.x.x 时遇到了类似的问题，并且配置中不再允许自定义属性。我在另一个 S.O 帖子上找到了解决方案：Using auto prefixer with postcss in webpack 2.0。如果由于某些未知原因，此链接会导致 404，我在这里编译最相关的答案：

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

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

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

这对我有用，但正如 Kreig 所说，不需要 LoaderOptionsPlugin()。您现在可以将选项直接传递给加载器声明：

const autoprefixer = require('autoprefixer');

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

问题是我已经用 Webpack 2.5.1 尝试了第二个，但它失败了。归功于 Pranesh Ravi 和 Kreig。