Webpack [url/file-loader] не разрешает относительный путь URL-адреса

Question

У меня проблема с Webpack относительно Relative Path. Позвольте мне попытаться объяснить ситуацию:

У меня есть 2 отдельный проект в Workspace каталоге:

1. Project-A [Группирование с помощью Gulp]: Стабильная & Рабочая
2. Проект-B [Объединение с использованием Webpack]: Новый проект

As оба проекта используют тот же стиль, поэтому я хотел повторно использовать файлы SCSS [состоящие из стандартных переменных, предопределенных макетов, модалов, классов и т. д.) из Проект А в проект B.

Теперь, если я пытаюсь импортировать проект-A index.scss в Project-B index.scss в качестве еще одного частичного [закомментировав фоновое изображение URL Depency], WebPack способен генерировать требуемый выходной файл CSS.

// Import Project A SCSS [Common Varibles, Classes, Styling etc] 
@import "../../../../Project_A/assets/stylesheets/index"; 

Но index.scss Project-A дополнительно со ссылкой фоновых изображений из соответствующего относительного пути, то WebPack сборка бросает ошибку

'File/dir not found in XYZ/Project-B/Source/Stylesheets'.

Exact Блок Ошибки:

ERROR in ./src/assets/stylesheets/index.scss Module build failed: ModuleNotFoundError: Module not found: Error: Cannot resolve 'file' or 'diWorkSpace\Project_B\src\assets\stylesheets

скриншот:

I я не понимаю, Почему Webpack не может разрешить Относительный путь активов внутри Project-A и все еще ищет «Проект B».

Вот код-Repo URL для имитируемого выпуска: https://github.com/raviroshan/webpack-build-issue/tree/master/WorkSpace

Действия для воспроизведения.

1. Скачать репо.
2. Просмотрите папку Project_B и выполните установку NPM.
3. Запустите «веб-пакет». Он будет правильно строить, поскольку код URL-адреса сравнивается с кодом .
4. Теперь положите обратно комментируемой строку кода: https://github.com/raviroshan/webpack-build-issue/blob/master/WorkSpace/Project_A/assets/stylesheets/index.scss#L27

Answer 1

Итак, наконец, после стольких борьбы, получил надлежащее РЕШЕНИЕ.

Оказалось, что проблема связана с загрузчиком CSS, т. Е. Он не может разрешить URL-адрес, соответствующий текущему файлу.

Использование resolve-url-loader решила эту проблему. https://www.npmjs.com/package/resolve-url-loader

// Old Loader Config in Webpack-entry 
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap!sass-loader?sourceMap') 

// New [Fixed] Loader Config in Webpack-entry 
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap!resolve-url-loader!sass-loader?sourceMap') 

Здесь обновляется код-Repo с решением: https://github.com/raviroshan/webpack-build-issue

Примечание: Не опускать -loader Ваши Webpack.config.js всегда должны использовать длинную форму-погрузчика name (т.е. суффикс-loader).

Существует еще один пакет с именем resolve-url, который Webpack может запутать с помощью решения-url-loader.

Answer 2

вам нужно установить publicPath как относительный путь, чтобы получить относительный путь в файле погрузчиком.

Answer 3

Похоже, это CSS-погрузчик неисправности и способ ее разрешения пути в @import и url().Он пытается разрешить все пути - даже те из импортированных таблиц стилей - относительно основного файла CSS - который в вашем случае - /Project_B/src/assets/stylesheets/index.scss.

Не плачь! Есть решение!

Возможно, это не идеально, но это лучший, с которым я приехал.

Создайте глобальную переменную $assetsPath, держащую путь к активам относительно текущей таблицы стилей. Затем добавьте эту переменную ко всем вашим значениям url().

В вашей /Project_A/assets/stylesheets/index.scss вы бы написать:

/*/ Using !default we can override this variable even before the following line: /*/ 
$assetsPath: '../' !default; 

.container { 
    /*/ ... /*/ 
    .content-wrapper { 
     /*/ ... /*/ 
     background-image: url($assetsPath + "images/content-bg.jpg"); 
    } 
} 

В вашей /Project_B/src/assets/stylesheets/index.scss вы бы написать:

/*/ The following variable will override $assetsPath defined in the imported file: /*/ 
$assetsPath: '../../../../Project_A/assets/'; 

/*/ Import Project A SCSS [Common Varibles, Classes, Styling etc] /*/ 
@import "../../../../Project_A/assets/stylesheets/index"; 

The Aftermath

Если вы связывайте Project-A с Глоток он собирается см. код проекта-А как:

 /*/ ... /*/ 
     background-image: url("../images/content-bg.jpg"); 

Хотя, когда вы связывайте Project-B с Webpack он собирается увидеть код Project-A, как:

 /*/ ... /*/ 
     background-image: url("../../../../Project_A/assets/images/content-bg.jpg"); 

Таким образом, вы сохраняются.

Наиболее определенно я рассмотрю этот вопрос поближе. Все это можно было бы избежать, если бы url-loader уважал бы путь в заявлении @import и соответствующим образом применял его к ссылочным активам. Либо я что-то упускаю, либо его следует рассматривать как ошибку.

Надеюсь, у вас чудесный день!
~ Wiktor