无法通过 webpack 加载 CSS |解析器错误 *答案

【问题标题】：Unable to load CSS via webpack | parser error at *无法通过 webpack 加载 CSS |解析器错误 *
【发布时间】：2016-12-23 08:02:15
【问题描述】：

我有一个像这样的webpack.config.js：

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 }),
    ],
};

test.css 内部的一些样式如下：

* {
    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;
}

在入口文件script.js我有import './css/test.css';将css加载到html页面中。但是当我$ npm start script.js 时，它在* { } 样式声明上出错，并出现以下错误：

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.

我认为在 css 上使用通配符设置 box-sizing: border-box 是非常标准的东西。为什么会出现这个错误？

【问题讨论】：

标签： node.js webpack webpack-style-loader

【解决方案1】：

星号仅适用于IE7及以下。我不认为 css-loader 能够解析这个标志，说明你为什么会收到这个错误

【讨论】：

【解决方案2】：

我在模块加载器中犯了一个糟糕的错误。以下代码：

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

应该是：

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

基本上要求 webpack 测试 .js 文件，然后才通过 babel-loader 加载。至于另一个暗示 css-loader 可能无法解析 * 匹配器的答案：不，它工作得很好。

【讨论】：