Disable webpack from injecting CSS / Autoprefixer not working

Question

New to webpack but currently webpack is injecting styles into my document body which I would like to disable. I am not sure how to accomplish this.

Here is my webpack.config.js

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

module.exports = {
    output: {
        filename: 'bundle.js'
    },
    entry: {
        app: './js/app.js'
    },

    module: {
        loaders: [
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract({use:[{loader: 'css-loader', options: {importLoaders: 1}}, 'postcss-loader', 'sass-loader']})
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('styles.css'),
        new webpack.LoaderOptionsPlugin({options: {
            context: __dirname,
            postcss: [
                autoprefixer
            ]
        }})
    ]
};

The html output is

<html>
    <head>
        <title>Test</title>
        <link rel="stylesheet" href="/wp-content/themes/index/styles.css">
        <style type="text/css">
            body {
            background-color: black; }

            h1 {
                color: #fff; }

            p {
                display: flex;
                color: #fff; }
       </style>
       <style type="text/css"></style>
    </head>
    <body>
        <h1>Test</h1>
        <p>Test</p>
        <script src="/wp-content/themes/index/dist/bundle.js"></script>
    </body>
</html>

As you can see it is still inject css that doesn't match the scss file I have. It is also not prefixing the the flex property or including an import I have in my sass file.

main.scss

@import 'test';

body {
    background-color: black;
}

h1 {
    color: #fff;
}

p {
    display: flex;
    color: #fff;
    background-color: red;
}

_test.scss

h2 {
    color: blue;
}

Euuuh... you have only one loader, which is an scss loader... what are you exactly expecting? — briosheje, Nov 29 '17 at 17:30

score 1 · Answer 1 · answered Nov 29 '17 at 20:34

There are three problems that need to be addressed with your configuration.

First, the loaders property inside module should be renamed to rules. The way you have it now was the correct way for webpack 1, webpack 2+ uses rules. https://webpack.js.org/guides/migrating/#module-loaders-is-now-module-rules

Second, LoaderOptionsPlugin was used to migrate from webpack 1 to webpack 2. You can read about it here.

The new recommended way to attach options to postcss-loader looks like this.

{
   loader: 'postcss-loader',
   options: {
       plugins: [autoprefixer()]
   }
}

With the above configuration in place, your css should be prefixed and you can safely remove webpack.LoaderOptionsPlugin from your plugins array.

Finally, if the information you provided above is correct, _test.scss is not being included in the final bundle because in main.scss you have

@import 'test';

Change it to import _test and you should see it included in the bundle.

Disable webpack from injecting CSS / Autoprefixer not working

1 Answers1