Я разрабатываю сайт и использую 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-загрузчик обрабатывает разрешение URL-адреса, поскольку я вижу испускаемое сообщение при компиляции пакета - он не завершается ошибкой.
Я также могу получить изображения для отображения, если я вручную добавлю к ним вызовы импорта в точке входа JS, установим в поле entry:
, а затем вызову абсолютный путь в SCSS. Но это нежелательно, так как с ростом проекта становится утомительно.
Я пытался использовать resolve-url-loader
и изменять несколько настроек, но я просто не могу заставить это работать.
Я также пытался использовать параметр resolve: { alias: { Images: path.resolve(__dirname, 'src/assets/img/' } }
, предоставленный webpack, а затем вызывать url('~Images/an-image.jpg')
в моем SCSS, но он просто воспроизводит те же результаты.
Итак, в целом, моя проблема заключается в том, что мне нужно иметь возможность использовать относительные пути в моем SCSS, а затем переписать их на правильный путь одним из моих загрузчиков.
Моя текущая конфигурация веб-пакета (вывод файлов с помощью загрузчика файлов, но добавление 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',
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',
}),
]
});
Заранее спасибо.