0

我有一个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.

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

4

2 回答 2

0

星号仅适用于IE7 及以下。我认为这css-loader无法解析为什么您会收到此错误的标志

于 2016-08-16T20:44:37.353 回答
0

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

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 可能无法解析*匹配器的答案：不，它工作得很好。

于 2016-08-16T21:06:55.057 回答