[英]unexpected character when using extract-text-webpack-plugin
For some reason this configuration fails when trying to build with extract-text-webpack-plugin. 由于某些原因,尝试使用extract-text-webpack-plugin构建时此配置失败。 I've been trying to work with extract-text-webpack-plugin for a few days and have been having a lot of issues trying to output the css. 我一直在尝试使用extract-text-webpack-plugin几天,并且在尝试输出css时遇到了很多问题。 I feel like i've configured it properly after following many guides and looking at many SO questions, but maybe I'm missing something.. 我觉得我在遵循了许多指南并查看了许多SO问题之后我已经正确配置了它,但也许我错过了一些东西......
webpack.config.js webpack.config.js
var entry_object = {};
entry_object[build_js_dir + "file.js"] = static_js + 'file.js';
entry: entry_object,
output: {
path: './',
filename: '[name]',
chunkFileName: "[id].chunk.js"
},
module: {
loaders: [{
test: /\.js$/,
include: path.resolve(__dirname),
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("css-loader!sass-loader")
}
]}
plugins: [
new ExtractTextPlugin("[name].css"),
]
}
error details: 错误详情:
~/src/$ webpack --show-error-details
Hash: ab317ccc65911901bea4
Version: webpack 1.13.0
Time: 1032ms
Asset Size Chunks Chunk Names
./static/build/js/file.js 51.7 kB 0 [emitted] ./static/build/js/file.js
[1] ./static/scss/style.scss 0 bytes [built] [failed]
+ 1 hidden modules
ERROR in ./static/scss/style.scss
Module parse failed: /home/zdelagrange/src/portal/cust-portal/bitsight/static/scss/style.scss Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '@' (1:0)
at Parser.pp.raise (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack/node_modules/acorn/dist/acorn.js:920:13)
at Parser.pp.getTokenFromCode (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack/node_modules/acorn/dist/acorn.js:2813:8)
at Parser.pp.readToken (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack/node_modules/acorn/dist/acorn.js:2508:15)
at Parser.pp.nextToken (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack/node_modules/acorn/dist/acorn.js:2500:71)
at Parser.parse (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack/node_modules/acorn/dist/acorn.js:1615:10)
at Object.parse (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack/node_modules/acorn/dist/acorn.js:882:44)
at Parser.parse (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack/lib/Parser.js:902:15)
at DependenciesBlock.<anonymous> (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack/lib/NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
at nextLoader (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
at /home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
at Storage.finished (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
at /home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/graceful-fs/graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:405:3)
@ ./static/js/file.js 3:0-29
but when I use this for the scss loader, it works fine: 但是当我将它用于scss加载器时,它工作正常:
{
test: /\.scss$/,
include: /.scss$/,
exclude: [
static_scss,
static_scss_pdf
],
loaders : [
'style-loader',
'css-loader?sourceMap',
'sass-loader?sourceMap'
]
},
The OP's problem is an unexpected @
(probably attached to an @import
). OP的问题是意外的@
(可能附加到@import
)。
The same error message occurs when it tries to resolve something like url(./filename.png)
尝试解析像url(./filename.png)
类的内容时会出现相同的错误消息
ERROR in ./~/jquery-ui/themes/base/images/ui-icons_cc0000_256x240.png
Module parse failed: /myproject/node_modules/jquery-ui/themes/base/images/ui-icons_cc0000_256x240.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '�' (1:0)
I needed to install url-loader
and file-loader
and add them as loaders to webpack: 我需要安装url-loader
和file-loader
并将它们作为加载file-loader
添加到webpack:
npm install --save url-loader
npm install --save file-loader
webpack.config.js webpack.config.js
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" },
{ test: /\.png$/, loader: "url-loader?limit=100000" }
]
}
Now it happily inlines those files: 现在它很高兴地内联这些文件:
$ webpack
...
[69] ./~/css-loader!./~/jquery-ui/themes/base/tooltip.css 528 bytes {4} [built]
[70] ./~/css-loader!./~/jquery-ui/themes/base/theme.css 18.7 kB {4} [built]
[71] ./~/jquery-ui/themes/base/images/ui-icons_444444_256x240.png 5.05 kB {4} [built]
[72] ./~/jquery-ui/themes/base/images/ui-icons_555555_256x240.png 5.05 kB {4} [built]
You are missing a comma at the end of the object before plugins. 在插件之前,您在对象的末尾缺少逗号。 It should be: 它应该是:
]},
plugins: [
new ExtractTextPlugin("[name].css"),
]
}
I stumbled across this as I was having exactly the same issue as you. 我偶然发现了这个问题,因为我遇到了与你完全相同的问题。 If the comma isn't the issue, I got it working by following this guide: http://www.jonathan-petitcolas.com/2015/05/15/howto-setup-webpack-on-es6-react-application-with-sass.html 如果逗号不是问题,我按照本指南开始工作: http : //www.jonathan-petitcolas.com/2015/05/15/howto-setup-webpack-on-es6-react-application-与-sass.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.