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

时间:2016-08-16 20:01:38

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

我有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. 非常标准。为什么会出错?

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分: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可能无法解析*匹配器:不,它运行正常。