20

我一直在尝试使用 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',
  }
};
4

4 回答 4

17

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

根据Browserslist 文档，建议将 browserslist 放在package.json.

所以这是另一种将autoprefixer 与 webpack一起使用的方法：

安装 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 文档，postcss-loader应该放在 and 之后css-loader，style-loader但在其他预处理器加载器之前，例如sass|less|stylus-loader，如果你使用任何的话。

package.json

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

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

于 2018-07-15T07:16:07.567 回答
7

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

编辑：这应该是这样的：

var autoprefixer = require('autoprefixer');

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

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

于 2016-06-24T13:51:53.993 回答
4

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

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

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

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

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

于 2016-06-24T10:44:50.537 回答
1

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

Webpack 2.xx引入了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。

于 2017-06-06T13:08:41.617 回答