Unable to load CSS via webpack | parser error at *

Question

I have a webpack.config.js like so:

const debug = process.env.NODE_ENV !== 'production';

const webpack       = require('webpack');
const precss        = require('precss');
const autoprefixer  = require('autoprefixer');

module.exports = {
    context: __dirname,
    devtool: debug ? 'inline-sourcemap' : null,
    entry: ['./script.js'],
    output: {
        path: `${__dirname}/dist`,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader!" },
            { exclude: ['/node_modules/', '/css/'], loader: 'babel-loader' }
        ]
    },
    postcss: function () {
        return [precss, autoprefixer];
    },
    plugins: debug ? [] : [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
    ],
};

and some style inside test.css like so:

* {
    box-sizing: border-box;
}

*:after {
    box-sizing: border-box;
}

*:before {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
    /* cursor: none; */    
    display: flex;
    align-items: center;
    justify-content: center;
}

In the entry file script.js I have import './css/test.css'; to load the css into the html page. But when I $ npm start the script.js, it errors out on the * { } style declaration with the following error:

ERROR in ./~/css-loader!./~/babel-loader!./css/test.css
Module build failed: SyntaxError: /Users/admin/projects/frameworks/superbook/css/test.css: Unexpected token (1:0)
> 1 | * {
    | ^
  2 |     box-sizing: border-box;
  3 | }
  4 | 
    at Parser.pp.raise (/Users/admin/projects/frameworks/superbook/node_modules/babylon/lib/parser/location.js:22:13)
    at Parser.pp.unexpected (/Users/admin/projects/frameworks/superbook/node_modules/babylon/lib/parser/util.js:89:8)
    at Parser.pp.parseExprAtom (/Users/admin/projects/frameworks/superbook/node_modules/babylon/lib/parser/expression.js:522:12)
    at Parser.pp.parseExprSubscripts (/Users/admin/projects/frameworks/superbook/node_modules/babylon/lib/parser/expression.js:277:19)
    at Parser.pp.parseMaybeUnary (/Users/admin/projects/frameworks/superbook/node_modules/babylon/lib/parser/expression.js:257:19)
    at Parser.pp.parseExprOps (/Users/admin/projects/frameworks/superbook/node_modules/babylon/lib/parser/expression.js:188:19)
    at Parser.pp.parseMaybeConditional (/Users/admin/projects/frameworks/superbook/node_modules/babylon/lib/parser/expression.js:165:19)
    at Parser.pp.parseMaybeAssign (/Users/admin/projects/frameworks/superbook/node_modules/babylon/lib/parser/expression.js:128:19)
    at Parser.pp.parseExpression (/Users/admin/projects/frameworks/superbook/node_modules/babylon/lib/parser/expression.js:92:19)
    at Parser.pp.parseStatement (/Users/admin/projects/frameworks/superbook/node_modules/babylon/lib/parser/statement.js:163:19)
 @ ./css/test.css 4:14-116
webpack: bundle is now VALID.

I thought setting box-sizing: border-box with a wildcards on css was pretty standard stuff. Why is this erroring out?

Answer 1

I made a whoopsie mistake inside my module loaders. The following code:

module: {
    loaders: [
        { test: /\.css$/, loader: "style-loader!css-loader!" },
        { exclude: ['/node_modules/', '/css/'], loader: 'babel-loader' }
    ]
},

should have been:

module: {
    loaders: [
        { test: /\.css$/, exclude: ['/node_modules/'], loader: 'style-loader!css-loader!' },
        { test: /\.js$/, exclude: ['/node_modules/', '/css/'], loader: 'babel-loader' }
    ]
},

Basically ask webpack to test for .js files and only then load via babel-loader. As to the other answer suggesting that css-loader probably isn't able to parse * matcher: No, it works just fine.