@uzi_no_uzi

WebPack file-loader выдает неверный путь?

Имеется конфиг с такими настройками для изображений и для less файлов.

{
      test: /\.(jpe?g|png|gif|svg)$/,
      use: [
        {
          loader: 'file-loader',
          options: {
						name: "[name].[ext]",
						outputPath: "img"
          }
        },
        {
          loader: 'image-webpack-loader',
          options: {
            mozjpeg: {
              progressive: true,
              quality: 65
            },
            optipng: {
              enabled: false,
            },
            pngquant: {
              quality: '65-90',
              speed: 4
            },
            gifsicle: {
              interlaced: false,
            },
            svgo: {
              enabled: false,
            }
          }
        }
      ]
    },
		{
			test: /\.less$/,
      use: [
        {
        	loader: 'style-loader',
        },
        {
        	loader: MiniCssExtractPlugin.loader,
        }, 
        {
        	loader: "css-loader",
        	options: {
        		sourceMap: true,
        	}
        },
        {
        	loader: "postcss-loader",
        	options: {
        		sourceMap: true,
        		config:  {
        			path: 'postcss.config.js',
        		}
        	}
        },
        {
        	loader: "less-loader",
        	options: {
						relativeUrls: false,
        		sourceMap: true,
        	}
        }
      ]
		},


Проблема заключается в том, что при попытке добавить фоновую картинку в less происходит ошибка связанная с путями.

Как я подключаю файлы в index.js

5dd308a859b8e004427376.png
import mainbg from './img/backgrounds/main-bg.svg';


Как я прописываю background в less
5dd308e595e99622904862.png
.main-page {
    background-image: url('./img/main-bg.svg');
    background-color: #172F6C;
}


Вот сама ошибка:


ERROR in ./src/less/styles.less (./node_modules/css-loader/dist/cjs.js??ref--6-2!./node_modules/postcss-loader/src??ref--6-3!./node_modules/less-loader/dist/cjs.js??ref--6-4!./src/less/styles.less)
Module not found: Error: Can't resolve './img/main-bg.svg' in 'C:\Users\Lenovo\Desktop\Loot Gamble\src\less'
@ ./src/less/styles.less (./node_modules/css-loader/dist/cjs.js??ref--6-2!./node_modules/postcss-loader/src??ref--6-3!./node_modules/less-loader/dist/cjs.js??ref--6-4!./src/less/styles.less) 4:41-69


5dd3091f3e591248528198.png

UPD:
Пробовал еще url-loader использовать, но опять же, такая же ошибка.
  • Вопрос задан
  • 345 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы