javascript - 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

雷雷

Answer 2

我試了一下你的配置，完全可以啊，我自己是如下配置的。要注意的一點是: 你需要在js裡面導入css文件，在頁面上style或link，webpack打包並不會生效

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