javascript - webpack2 postcss-loader cannot take effect using 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'
    })
  ]

The result does not take effect in the browser.

I tried to write postcss.config.js, but it didn’t work either:(

3.postcss.config.js

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

What's the problem?

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

I tried your configuration and it’s totally fine. I configured it myself as follows. One thing to note is: you need to import css files in js, style or link on the page, webpack packaging will not take effect

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