😄

Всем привет, проблема с postcss. Данный warning будет до тех пор, пока в самой либе не сделают соответствующие изменения? или где-то в конфиге вебпака могла быть ошибка?

Доброго времени суток!
Вебпак падет при попытке собрать стили, а именно ругается на то, что не может найти не объявленную SASS переменную к которой я обращаюсь. Но я вроде бы все проимпортировал как надо. Вобщем, скрины и сама сборка прилагаются.
Нужен незамыленный взгляд со стороны на сборку, потому как сам я уже не в состоянии отследить корень проблемы.
Возможно, это внутренняя проблема Вебпака версии 5, связанная с несовместимостью API каких-то плагинов или лоадеров, но думаю, что я все-таки где-то перемудрил.

Особенность сборки:
- сборка заточена исключительно для целей обычной статичной многостраничной верстки и только;
- используется Webpack 5 и его новый подход к обработке ассетов;
- также я попытался сделать конфиг максимально модульным (возможно, даже с перебором);

з.ы. Хотя, справедливости ради стоит сказать, что сборка падала и при обычной обработке картинок и шрифтов с помощью file-loader. Так что, скорее всего проблема не в этом.
Также есть проблемы с разрешением путей к картинкам и шрифтам из файлов стилей,
а точнее, с моим пониманием абсолютных/относительных путей, полями  path, publicPath, contentBase и всем сопутствующим. Когда и где, какие пути использовать? Как грамотно и когда уместно использовать псевдонимы
resolve: {
alias: {
 "@images": path.resolve(__dirname, "path/to/images"),
 "@fonts": path.resolve(__dirname, "path/to/fonts"),
},
extensions: ['js', 'pug', 'scss', 'woff', 'jpeg'] // Какие расширения файлов тут уместно использовать и для чего именно ?
} Ну т.е. эти алиасы предназначены для использования внутри конфигурационных файлов Вебпак, или например их также можно использовать изнутри sass файлов в background-mage: url('@images/path/to/image.jpeg') ?
Нужно-ли дополнительно устанавливать url-loader для этих целей или это альтернатива свойству css-loader
options: {
         url: true,
       },
? ? ?

Также был бы благодарен за любые советы, замечания, предложения  по улучшению сборки.

Импорт стилей

За основу была взята вот эта сборка >>> https://github.com/tomik23/webpack-boilerplate
Возможно кому-то пригодится уже в таком, готовом виде.

Успешно запустилась сборка

1. переменная IS_DEV_MODE у вас булевое значение, потому просто замените на

IS_DEV_MODE ? "style-loader" : MiniCssExtractPlugin.loader

2. Вторая ошибка пролечилась импортом common.scss в index.scss напрямую (я так понимаю, ты хотел, что все стили были доступны глобально, без необходимости подгружать в каждый файл, но я хз как это делается - нету опыта)

IS_DEV_MODE ? "style-loader" : MiniCssExtractPlugin.loader

Благодарю за уделенное время! В первом случае действительно была глупая ошибка с моей стороны с использованием пременной окружения, но я уже этого не мог развидеть самостоятельно.
Да, прямой импорт в модуль по месту обращения к переменной решил вопрос, но это не совсем то чего я хотел добиться, т.к.
при таком подходе мне придется каждый раз вручную импортировать файл "_vars.scss" по месту обращения к переменной. При таком подходе теряется смысл Вебпака. Раньше такой подход работал, когда я завязываю все зависимости на *.js файлах, будь-то стили или что-то еще.

На данном этапе, вроде бы добился предсказуемой сборки в PROD режиме для разрешения путей к шрифтам и картинкам из css. Но теперь поломались все пути в DEV сборке... Когда в publicPath указано '/build/' все нормально собирается для "production", а когда указано '/' все нормально собирается для "development". Не пойму, как добиться одновременного адекватного разрешения зависимостей в обоих сборках при одном значении для publicPath.
з.ы. На предыдущую версию сборки нет особого смысда ориентироваться, я уже эксперементировал с путями после этого. Если сам не разберусь, позже залью обновленную версию сборки.

Не знаю кто-нибудь уже озвучивал здесь подобную "мудрость", но у меня родилась альтернативная версия концовки изречения про то, чем бесконечно можно любоваться всю жизнь

придется каждый раз вручную импортировать файл "_vars.scss" - Каждый import scss сразу обрабатывается лоадерами, так что придется делать импорт переменных scss каждый раз. Не получиться импортировать переменные а потом scss где на них будет ссылка, они друг друга просто не будут видеть

При таком подходе теряется смысл Вебпака - Почему же?

Если уж не хочется делать импорты то вот решение, на счет него на сто процентов не уверен, сам не пробовал

Так о том и речь, что я хочу делать импорты стилей в js файлах как здесь https://t.me/webpack_ru/71311
Но при этом хочу, чтобы все глобальные стили, миксины, переменные, шрифты импортировались посредством внутренних директив SASS - @import. Т.е. все общие стили я завязываю на common.scss, а уже потом импортирую его в каждую точку входа посредством JS импортов, т.е. для точек входа index.js, about.js, contact.js -  import '../../common/styles/common.scss' плюс импорт стилей, специфичный для соответствующей точки входа, например, для index.js это index.scss. Там суть была в том, что я хочу один раз заимпортить файл с Sass переменными  _vars.scss в общий стилевой файл common.scss, чтобы иметь доступ к миксинам и переменным из всех других sass. Именно в этом контексте я говорил про то, что не хочу  каждый раз вручную импортировать файл "_vars.scss" по месту обращения к переменной, т.е. в index.scss, about.scss, contact.scss, header.scss и т.д.

т.е., так как на картинке не обрабатывается нормально. Мне приходится в index.scss прописывать @import '../../common/styles/utils/vars.scss'. Также, это потребуется проделать столько раз, сколько раз мне надо будет обратиться к переменной.