webpack2 postcss-loader 使用 autoprefixer 无法生效

Question

1.package.json

"devDependencies": {
    "@types/jasmine": "2.5.36",
    "@types/node": "^6.0.45",
    "angular2-template-loader": "^0.6.0",
    "autoprefixer": "^7.1.1",
    "awesome-typescript-loader": "^3.0.4",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.16.1",
    "jasmine-core": "^2.4.1",
    "karma": "^1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.1",
    "node-sass": "^4.5.3",
    "null-loader": "^0.1.1",
    "postcss-loader": "^2.0.5",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.2",
    "sass-loader": "^6.0.5",
    "style-loader": "^0.13.1",
    "typescript": "^2.3.4",
    "webpack": "2.2.1",
    "webpack-dev-server": "2.4.1",
    "webpack-merge": "^3.0.0"
  }

2.webpack.common.js

...
{
        test: /\.(scss|sass)$/,
        exclude: helpers.root('src', 'app'),
        loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'postcss-loader', 'sass-loader'] })
      },
      {
        test: /\.(scss|sass)$/,
        include: helpers.root('src', 'app'),
        loader: 'raw-loader!postcss-loader!sass-loader'
      },
...
plugins: [

    new webpack.ContextReplacementPlugin(
      
      /angular(\\|\/)core(\\|\/)@angular/,
      helpers.root('./src'), 
      {}
    ),

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

    new ExtractTextPlugin('style.css'),

    new webpack.optimize.CommonsChunkPlugin({
      name: ['app', 'vendor', 'polyfills']
    }),

    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ]

结果在浏览器中没有生效。

我尝试写 postcss.config.js ，同样没有生效 :(

3.postcss.config.js

module.exports = {
    pulgins: [
        require('autoprefixer')()
    ]
};

问题出在哪里呢？

Answer 1

use: [
            {
              loader: 'css-loader',
              options: { autoprefixer: true, sourceMap: true, importLoaders: 1 }
            },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: true,
                plugins: () => [autoprefixer({ browsers: ['iOS >= 7', 'Android >= 4.1'] })],
              },
            },
            'sass-loader'
          ]

Answer 2

我试了下你的配置，完全可以啊，我自己是如下配置的。需要注意的一点是: 你需要在js里面导入css文件，在页面上style或者link，webpack打包并不会生效

        new webpack.LoaderOptionsPlugin({
            options: {
                postcss: function() {
                    return [require('autoprefixer')];
                }
            }
        }),

Answer 3

最好把browserslist放到package.json里，而非用autoprefixer的option属性

We recommend to avoid Autoprefixer option and use .browserslistrc config or package.json. In this case browsers will be shared with other tools like babel-preset-env or Stylelint.

"browserslist": [
    "iOS >= 8",
    "Android > 4"
  ]