Webpack 网页包2 sass加载程序意外字符“@”
运行webpack时,我有下一个webpack 2规则配置,并抛出下一个错误:Webpack 网页包2 sass加载程序意外字符“@”,webpack,webpack-2,webpack-style-loader,sass-loader,isomorphic-style-loader,Webpack,Webpack 2,Webpack Style Loader,Sass Loader,Isomorphic Style Loader,运行webpack时,我有下一个webpack 2规则配置,并抛出下一个错误: 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":
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加载器、解析url加载器和POSTSS加载器处理.scss之后,您将使用样式加载器。这样做的结果仍然是CSS,因此应该有一个CSS加载程序将其转换为JavaScript。因为您使用的是同构样式加载器,所以不需要样式加载器,从您传递给它的选项来看,它看起来应该是css加载器。因此,将样式加载器重命名为css加载器:
在使用sass加载器、解析url加载器和POSTSS加载器处理.scss之后,您将使用样式加载器。这样做的结果仍然是CSS,因此应该有一个CSS加载程序将其转换为JavaScript。因为您使用的是同构样式加载器,所以不需要样式加载器,从您传递给它的选项来看,它看起来应该是css加载器。因此,将样式加载器重命名为css加载器:
{
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",
],
}
},
]
},