node_modules 中的 webpack 4 图像:未找到模块

Question

问题

我使用 webpack 4 将 scss 编译为 css，并使用 MiniCssExtractPlugin 将 css 保存到不同的文件中。问题是，我无法加载通过 url(( 包含在 scss 文件中的图像和字体。运行开发或生产之间也没有区别。 SCSS编译完美，没有任何问题。此外，scss-loader 从node_modules加载 .scss-文件没有问题。
为什么会发生此错误，如何修复？

运行 npm 时出现错误消息

ERROR in ./ui/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./ui/index.scss)
Module not found: Error: Can't resolve '../webfonts/fa-solid-900.woff' in '/home/asdff45/Schreibtisch/Programme/GO/src/factorio-server-manager/manager/ui'
@ ./ui/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./ui/index.scss) 7:336881-336921
ERROR in ./ui/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./ui/index.scss)
Module not found: Error: Can't resolve '../webfonts/fa-solid-900.woff2' in '/home/asdff45/Schreibtisch/Programme/GO/src/factorio-server-manager/manager/ui'
@ ./ui/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./ui/index.scss) 7:336799-336840

还有更多，但都有相同的错误，只是文件名发生了变化。

webpack-config

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: {
// js: './ui/index.js',
sass: './ui/index.scss'
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'app')
},
resolve: {
alias: {
Utilities: path.resolve(__dirname, 'ui/js/')
},
extensions: ['.js', '.json', '.jsx']
},
module: {
rules: [
{
test: /.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
]
},
{
test: /(.(png|jpe?g|gif)$|^((?!font).)*.svg$)/,
loaders: [
{
loader: "file-loader",
options: {
name: loader_path => {
if(!/node_modules/.test(loader_path)) {
return "app/images/[name].[ext]?[hash]";
}
return (
"app/images/vendor/" +
loader_path.replace(/\/g, "/")
.replace(/((.*(node_modules))|images|image|img|assets)//g, '') +
'?[hash]'
);
},
}
}
]
},
{
test: /(.(woff2?|ttf|eot|otf)$|font.*.svg$)/,
loaders: [
{
loader: "file-loader",
options: {
name: loader_path => {
if (!/node_modules/.test(loader_path)) {
return 'app/fonts/[name].[ext]?[hash]';
}
return (
'app/fonts/vendor/' +
loader_path
.replace(/\/g, '/')
.replace(/((.*(node_modules))|fonts|font|assets)//g, '') +
'?[hash]'
);
},
}
}
]
}
]
},
performance: {
hints: false
},
plugins: [
new MiniCssExtractPlugin({
filename: "bundle.css"
})
]
}

项目回购/分支

Answer 1

你需要在你的构建中添加 resolve-url-loader，如下所示：

{
test: /.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"resolve-url-loader",
"sass-loader?sourceMap"
]
}

resolve-url-loader根据导入资产的原始文件解析资产的路径。

我在本地尝试过，现在构建已通过:)干杯！