Question

我有var scopeMessage = $scope.messages; returnAPromise('third').then(scopeMessage.push.bind(scopeMessage));这样：

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将css加载到html页面。但是当我import './css/test.css'; $ npm start时，它会在script.js样式声明中出错并出现以下错误：

* { }

我认为在css上使用通配符设置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.非常标准。为什么会出错？

Answer 1

星标只适用于 IE7及。我不认为css-loader能够解析此错误的原因

Answer 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可能无法解析*匹配器：不，它运行正常。

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

2 个答案: