webpack (с sass-loader) - scss файл @import не распознает псевдоним решения

Моя структура проекта:

webpack.config.js
app--

   --> src
   ---->> components
   ------>>> myComponent.js
   ------>>> myComponent.scss

   --> styles
   ---->> variables.scss

В webpack.config module.exports:

...
resolve: {
    alias: {
       styles: path.join(__dirname, 'app/styles') 
   }
}

В моем файле - myComponent.scss:

@import "styles/variables";

Я получаю эту ошибку при создании bundle.js:

Module build failed:
@import "styles/variables";
^
      File to import not found or unreadable: styles/variables

Как я могу @import aliases в sass файлах?

Ответ 1

Я смог использовать в таблице стилей псевдоним, который я определил в webpack, используя следующее:

@import '~alias/variables';

просто префикс псевдонима ~ помогло, как это было предложено в документации здесь

Ответ 2

Другое исправление, связанное с этим вопросом, удалите .scss

@import '~scss/common.scss';

должно быть

@import '~scss/common';

Ответ 3

Поскольку ваш файл webpack.config.js уже находится в папке /app, не должен быть псевдоним:

resolve: {
   alias: {
       styles: path.join(__dirname, 'styles') 
   }
}

Ответ 4

В моем случае зависимость является узловым модулем, поэтому я могу импортировать его следующим образом:

@import '~node-module-name/variables';

И при использовании имени dir файла фактического узла мой редактор (PhpStorm) больше не показывает неразрешенную ошибку пути (проблема, упомянутая @tkiethanom). Похоже, мне нужно указать псевдоним в конфигурации webpack, если я хочу использовать импорт стиля sass (например, my-package/colors вместо my-package/_colors.scss), и, похоже, не имеет значения, что такое имя это псевдоним, если я использую имя каталога узла