cannot get postCSS autoprefixer to work

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

postcss-loader installed through npm
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']
        },
      ],
    }

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]

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'
            },

        ]
    },

@six006

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

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.

Navigation Menu

Repository navigation

cannot get postCSS autoprefixer to work #1237

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

cannot get postCSS autoprefixer to work #1237

Description

Activity

six006 commented on Dec 26, 2016

katallaxie commented on Jan 1, 2017

bobrosoft commented on Apr 11, 2017

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions