出于明显的原因,我正在开发网站并使用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,则可以解决正确的路径,但是file-loader
无法找到图像然后发出图像。
我知道在css-loader处理url解析时正在输出图像,因为我在编译bundle时可以看到发出的消息-它不会失败。
如果我在JS入口点中手动添加导入调用,在entry:
字段中设置然后在SCSS中调用绝对路径,则也可以显示图像。但这是不希望的,因为随着项目的不断发展它变得乏味。
我尝试使用resolve-url-loader
并更改多个设置,但似乎无法正常使用。
我也尝试过使用webpack提供的resolve: { alias: { Images: path.resolve(__dirname,'src/assets/img/' } }
选项,然后在我的SCSS中调用url('~Images/an-image.jpg')
,但它只产生相同的结果。
因此,总的来说,我的问题是我需要能够在SCSS中使用相对路径,然后由我的一个加载程序将它们重写为正确的路径。
我当前的webpack配置(使用文件加载器输出文件,但将assets/css/
放在url的开头)如下:
"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',}
}
]
},{
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',}),]
});
先谢谢您。