我是新来的,并且一直在尝试在一个遗留网站上实现它。无论我尝试多少解决方案,在使用sass/raw/css/loaders进行构建时,我总是收到“未知单词”错误。错误似乎发生在'module.export‘,我猜是由于在.js文件中导入样式表而添加的。这是我的webpack.config.js:
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: { presets: ["env"] }
}
},
{ // sass / scss loader for webpack
test: /\.(sass|scss)$/,
use: [
'css-loader',
'raw-loader',
'sass-loader'
],
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
use: [ 'file-loader' ]
}
]
}
在index.js中:
`import '../css/global.scss';`
global.scss文件由@import语句列表组成。
下面是我得到的错误:
ERROR in ./css/analytics/global.scss
Module build failed: Unknown word (1:1)
> 1 | module.exports = ".custom {\n (...)
似乎无论global.scss文件中有什么,附加的'module.exports‘似乎都会破坏构建。
我在互联网上尝试了许多建议,但都没有奏效。
提前感谢!
发布于 2018-06-01 05:42:51
我发现我做错了什么。对于这种情况,原始加载器不是正确的加载器,尽管它“看起来”已经解决了urls解析的问题。我将其替换为resolve-url-loader,并做了一些调整。结果如下:
module: {
rules: [
{
test: /\.js$/,
use: {
loader: "babel-loader",
options: { presets: ["env"] }
}
},
{ // sass / scss loader for webpack
test: /\.(sass|scss)$/,
use: [
'style-loader',
'css-loader',
'resolve-url-loader',
'sass-loader?sourceMap'
],
},
{
test: /\.(jpg|png|gif)$/,
use: {
loader: "file-loader",
options: {
name: "[path][name].[hash].[ext]",
},
},
},
{
test: /\.svg$/,
use: "file-loader",
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: PATH_CONFIGS.global_path + '/fonts'
}
}]
}
]
因此,我猜测“未知单词”错误是一种通用的响应,可以指出许多可能的问题。希望这对处于类似情况的人有所帮助。
https://stackoverflow.com/questions/50612756
复制相似问题