问题
我使用 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 配置
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"
})
]
}
项目回购/分支 https://github.com/knoxfighter/factorio-server-manager/tree/Feature/update-everything-webpack-only