cannot get postCSS autoprefixer to work

[akhatri]

• What is the current behavior?
  I am trying to implement PostCSS autoprefixer to my project but it doesn't seem to work. After going through the instructions on the PostCSS repo, I still have no luck so was hoping someone can assist. I have followed the steps as below

1. postcss-loader installed through npm
2. webpack.common.js snippet as below

    module: {
      rules: [
        /*
         * to string and css loader support for *.css files
         * Returns file content as string
         *
         */
        {
          test: /\.css$/,
          use: ['to-string-loader', 'css-loader', 'postcss-loader']
        },

        // support for .scss files
        // use 'null' loader in test mode (https://github.com/webpack/null-loader)
        // all css in src/style will be bundled in an external css file
        {
          test: /\.(scss|sass)$/,
          exclude: /node_modules/,
          loaders: ['raw-loader', 'postcss-loader', 'sass-loader']
        },
      ],
    }

3. I have created a postcssconfig.js with the following plugins

module.exports = {
  plugins: [
    require('autoprefixer')({ /* ...options */ })
  ]
}

Is there some other setting or config that needs to be added? The vendor prefixes do not work e.g. display: flex in a sample scss file

• Please tell us about your environment:

• Angular version: 2.0.0
• Browser: [Chrome]

[six006]

1.npm install autoprefixer
const autoprefixer = require('autoprefixer');

2.add some
{
test: /.scss$/,
exclude: /node_modules/,
use: [
{
loader: 'raw-loader'
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
plugins: () => [autoprefixer({ browsers: ['iOS >= 7', 'Android >= 4.1'] }), rpx2rem()],
},
},

                    {
                        loader: 'sass-loader'
                    }
                ],
            },

3.full text

    module: {

        rules: [

            /*
             * Typescript loader support for .ts and Angular 2 async routes via .async.ts
             * Replace templateUrl and stylesUrl with require()
             *
             * See: https://github.com/s-panferov/awesome-typescript-loader
             * See: https://github.com/TheLarkInn/angular2-template-loader
             */
            {
                test: /\.ts$/,
                loaders: [
                    '@angularclass/hmr-loader?pretty=' + !isProd + '&prod=' + isProd,
                    'awesome-typescript-loader',
                    'angular2-template-loader'
                ],
                exclude: [/\.(spec|e2e)\.ts$/]
            },

            /*
             * Json loader support for *.json files.
             *
             * See: https://github.com/webpack/json-loader
             */
            {
                test: /\.json$/,
                loader: 'json-loader'
            },

            /*
             * to string and css loader support for *.css files
             * Returns file content as string
             *
             */
            {
                test: /\.css$/,
                loaders: ['to-string-loader', 'css-loader']
            },

            /*
             * to string and css loader support for *.less files
             * Returns file content as string
             *
             */

            // {
            //     test: /\.less$/,
            //     exclude: /node_modules/,
            //     loaders: ['raw-loader', 'postcss-loader', 'less-loader'] // less-loader
            // },
            {
                test: /\.less$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'raw-loader'
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true,
                            plugins: () => [autoprefixer({ browsers: ['iOS >= 7', 'Android >= 4.1'] }), rpx2rem()],
                        },
                    },
                    {
                        loader: 'less-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                ],
            },
             /*
             * to string and css loader support for *.scss files
             * Returns file content as string
             *
             */
            // {
            //     test: /\.scss$/,
            //     exclude: /node_modules/,
            //     loaders: ['raw-loader', 'postcss-loader', 'sass-loader'] // sass-loader not scss-loader
            // },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'raw-loader'
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true,
                            plugins: () => [autoprefixer({ browsers: ['iOS >= 7', 'Android >= 4.1'] }), rpx2rem()],
                        },
                    },
                    
                    {
                        loader: 'sass-loader'
                        // options: {
                        //     sourceMap: true,
                        // },
                    }
                ],
            },
            /* Raw loader support for *.html
             * Returns file content as string
             *
             * See: https://github.com/webpack/raw-loader
             */
            {
                test: /\.html$/,
                loader: 'raw-loader',
                exclude: [helpers.root('src/index.html')]
            },

            /* File loader for supporting images, for example, in CSS files.
             */
            {
                test: /\.(jpg|png|gif)$/,
                loader: 'file'
            },

        ]
    },

[katallaxie]

@six006 seems to be sufficient. If more is needed add it to the wiki.

[bobrosoft]

Just found: every config i.e. webpack.dev.js, webpack.prod.js, webpack.test.js overrides (s)css rules from webpack.common.js so 'postcss-loader' SHOULD BE ADDED INTO EVERY CONFIG.