css 带有 webpack 的自动前缀

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

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

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

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

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

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

Answer 2

所以找到问题了。愚蠢的我，postcss 块需要直接在 webpack 配置下，我把它放在模块块中。我的坏。

编辑：应该是这样的：

var autoprefixer = require('autoprefixer');

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

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

Answer 3

我在使用 Webpack 2.x.x 时遇到了类似的问题，配置中不再允许自定义属性。我在另一个 S.O post: 上找到了解决方案。如果出于某种未知原因，此 link 会导致 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。

Answer 4

As written in Autoprefixer documentation, "Autoprefixer uses Browserslist"

As per the Browserslist documentation, it is recommended to place the browserslist in package.json.

所以这里有另一种方法将自动前缀与 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'] 
    },
    ...
  ]
}

As per postcss documentation, the postcss-loader should be placed after css-loader and style-loader, but before other preprocessor loaders like e.g sass|less|stylus-loader, if you use any.

package.json

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

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

css 带有 webpack 的自动前缀

css autoprefixer with webpack

webpack

autoprefixer

postcss