3

I'm using Webpack to compile Sass and the PostCSS autoprefixer is not working on partials being imported into the style.scss entry point.

Adding styles directly to style.scss are being prefixed as expected, yet any file referenced as an @import is not being autoprefixed.

I have added webpack.config, postcss.config and style.scss for reference below.

webpack.config.js

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');

module.exports = {
    entry: ['./src/js/index.js', './src/scss/style.scss'], 
    output: {
        filename: './js/bundle.js',
        path: path.join(__dirname, 'dist'),
        publicPath: './dist/'
    },
    watch: true,
    module: {
        loaders: [
        {
            test: /.jsx?$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
                presets: ['es2015', 'react']
            }
        },
        {
            test: /\.(png|jpg|gif)$/,
            use: [
                {
                    loader: 'url-loader',
                    options: {}  
                }
            ]
        },
        {
            test: /\.scss$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: ['css-loader', 'sass-loader', 'postcss-loader']
            }),
            exclude: /node_modules/,
        }
    ]},

    plugins: [
        new ExtractTextPlugin({ filename: './css/style.css' })
    ]

};

postcss.config.js

module.exports = {
  map: false,
  plugins: {
    'autoprefixer': {browsers: ['last 2 versions', '> 5%']},
  }
}

style.scss

@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
@import 'partials/admin'; 
@import 'partials/nav';
@import 'partials/photos';  
@import 'partials/no-results';  
.test{
   display: flex; // <- This is being prefixed as expected.
}

Is there a special loader or syntax I am missing get the @import files autoprefixed?

* EDIT *

I was able to solve this by adjusting the order of the scss loaders.

{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
    fallback: "style-loader",
    use: [
     { loader: 'css-loader' },
     { loader: 'postcss-loader' },
     { loader: 'sass-loader', 
        options: {
           outputStyle: 'expanded'
        },
     }
   ]
}),
exclude: /node_modules/,
}
Darren Cooney
  • 1,012
  • 16
  • 25
  • yes, ordering matters. loaders in Webpack are like transforming tools. one loader's output is next loader's input. – skyboyer Feb 21 '18 at 08:37
  • 1
    you should put your * EDIT * as an answer and mark it correct. worked for me as well – a_b Aug 29 '18 at 09:01

1 Answers1

2

You might want to try postcss-scss

I further provide a postcss.config.js: 

module.exports = {
parser: 'postcss-scss',
plugins: [
    require('autoprefixer'),
]
}

Good luck

Euripides Georgantzos
  • 576
  • 7
  • 15