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

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

webpack.config.js
app--

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

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

в webpack.модуль config.экспорт:

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

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

@import "styles/variables";

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

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

как я могу @импортировать псевдонимы в файлы sass?

20
autoprefixer sass sass-loader webpack

4 ответов

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

@import '~alias/variables';

просто путем префикса псевдонима с ~ сделал трюк для меня, как указано в документации в здесь

45

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

@import '~scss/common.scss';

должно быть 

@import '~scss/common';
4

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

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

?

1

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

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

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

1