Webpack 2 sass-loader意外字符"@" [英] Webpack 2 sass-loader Unexpected character '@'
问题描述
当运行webpack引发下一个错误时,我具有下一个webpack 2规则配置:
i have the next webpack 2 rules configuration when run webpack throwed the next error:
Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @media screen and (min-width: 40em) {
| .feature {
| margin-bottom: 8.75rem;
@ ./~/style-loader?{"camelCase":true,"localIdentName":"[name]_[local]_[hash:base64:3]","modules":true}!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader?{"sourceMap":true,"outputStyle":"expanded","include":["/opt/inmoblex/current/inmoblex/cfg/src/styles","node_modules"]}!./src/components/LandingFeature/styles.scss 4:14-310
哪里错了?
:)
感谢帮助
rules: [
{
test: /\.css$/,
use: [
{ loader: 'isomorphic-style-loader' },
{ loader: 'css-loader' },
{ loader: 'postcss-loader' },
]
},
{
test: /\.scss/,
use: [
{ loader: 'isomorphic-style-loader' },
{
loader: 'style-loader',
options: {
camelCase: true,
localIdentName: '[name]_[local]_[hash:base64:3]',
modules: true
}
},
{ loader: 'postcss-loader' },
{ loader: 'resolve-url-loader' },
{
loader: 'sass-loader',
options: {
sourceMap: true,
outputStyle: 'expanded',
include: [
path.resolve(__dirname, "./src/styles"),
"node_modules",
],
}
},
]
},
{
test: /\.json/,
use: [
{ loader: 'json-loader' },
]
},
{
test: /\.(png|jpg|gif|woff|woff2)$/,
use: [{
loader: 'url-loader',
}]
},
{
test: /\.(mp4|ogg|svg)$/,
use: [{
loader: 'file-loader',
}]
},
],
推荐答案
使用sass-loader
,resolve-url-loader
和postcss-loader
处理.scss
后,您正在使用style-loader
.结果仍然是CSS,因此应该有一个css-loader
可以将其转换为JavaScript.因为您正在使用isomorphic-style-loader
,所以不需要style-loader
,并且从传递给它的选项中,它似乎应该是css-loader
.因此,将style-loader
重命名为css-loader
:
You're using style-loader
after the .scss
has been processed with sass-loader
, resolve-url-loader
and postcss-loader
. The result of this is still CSS, so there should be a css-loader
that transforms it to JavaScript. Because you're using isomorphic-style-loader
you won't need the style-loader
and from the options you passed to it, it looks like that should have been the css-loader
. So rename style-loader
to css-loader
:
{
test: /\.scss/,
use: [
{ loader: 'isomorphic-style-loader' },
{
loader: 'css-loader',
options: {
camelCase: true,
localIdentName: '[name]_[local]_[hash:base64:3]',
modules: true
}
},
{ loader: 'postcss-loader' },
{ loader: 'resolve-url-loader' },
{
loader: 'sass-loader',
options: {
sourceMap: true,
outputStyle: 'expanded',
include: [
path.resolve(__dirname, "./src/styles"),
"node_modules",
],
}
},
]
},
这篇关于Webpack 2 sass-loader意外字符"@"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!