出于显而易见的原因,我正在开发一个网站并使用 webpack。我遇到的问题是通过 SCSS 文件导入到我的项目中的图像的路径解析。问题是 css-loader 无法解析正确的路径。似乎正在发生以下情况:
如果我允许 css-loader
处理 url() 导入(将 url 选项保留为 true),它将重写相对于 ExtractCSSChunksPlugin()< 中指定的输出目录的文件路径
,例如:
url('../img/an-image.jpg')
应重写为 url('http://localhost:3000/assets/img/an-image .jpg')
,但是,实际输出的是 url('http://localhost:3000/assets/css/assets/img/an-image.jpg')
.
如果我将其更改为 false,则会解析正确的路径,但文件加载器
无法找到图像并发出它们。
我知道当 css-loader 处理 url 解析时会输出图像,因为我可以在编译包时看到发出的消息 - 它不会失败。
如果我在 JS 入口点手动添加导入调用,在 entry:
字段中设置,然后在 SCSS 中调用绝对路径,我也可以获得要显示的图像。但这是不可取的,因为随着项目的不断增长,它会变得乏味。
我尝试使用 resolve-url-loader
并更改多个设置,但我似乎无法让它工作。
我还尝试使用 webpack 提供的 resolve: { alias: { Images: path.resolve(__dirname, 'src/assets/img/' } }
选项,然后调用 url('~Images/an-image.jpg')
在我的 SCSS 中,但它只是重现相同的结果。
所以,总的来说,我的问题是我需要能够在 SCSS 中使用相对路径,然后由我的加载器之一将它们重写为正确的路径。
我当前的 webpack 配置(使用文件加载器输出文件,但在 URL 开头添加 assets/css/
)如下:
"use strict";
const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common');
const ExtractCSSChunksPlugin = require('extract-css-chunks-webpack-plugin');
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
entry: [
'webpack-hot-middleware/client',
],
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
}
}
},
{
test: /\.scss$/,
use: [
{
loader: ExtractCSSChunksPlugin.loader,
options: {
hot: true,
}
},
{
loader: 'css-loader',
options: {
sourceMap: true,
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
}
}
]
},
{
test: /\.html$/,
use:['html-loader']
},
{
test:/\.(svg|jpg|png|gif)$/,
use: [{
loader:'file-loader',
options: {
publicPath: 'assets/img',
outputPath: 'assets/img',
name: '[name].[ext]',
esModule: false
}
}],
},
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new ExtractCSSChunksPlugin({
filename: 'assets/css/[name].css',
chunkFilename: 'assets/css/[id].css',
}),
]
});
提前谢谢您。
最佳答案
好吧,看起来我已经通过解析文件加载器配置字段中设置的 publicPath
解决了这个问题: publicPath: path.resolve(__dirname, '/assets/img')
。
我的配置现在是:
"use strict";
const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common');
const path = require('path');
const ExtractCSSChunksPlugin = require('extract-css-chunks-webpack-plugin');
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
entry: [
'webpack-hot-middleware/client',
],
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
}
}
},
{
test: /\.scss$/,
use: [
{
loader: ExtractCSSChunksPlugin.loader,
options: {
hot: true,
}
},
{
loader: 'css-loader',
options: {
sourceMap: true,
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
}
}
]
},
{
test: /\.html$/,
use:['html-loader']
},
{
test:/\.(svg|jpg|png|gif)$/,
use: [{
loader:'file-loader',
options: {
publicPath: path.resolve(__dirname, '/assets/img'),
outputPath: 'assets/img',
name: '[name].[ext]',
esModule: false
}
}],
},
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new ExtractCSSChunksPlugin({
filename: 'assets/css/[name].css',
chunkFilename: 'assets/css/[id].css',
}),
]
});
关于javascript - Webpack url() 使用 css-loader 进行路径解析,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59373323/