Как использовать sass-loader в Angular?

Question

Как включить sass-загрузчик в Angular?

Я пытаюсь использовать @import "theme.scss"; inside*. Scss` файлы.

Но я получаю сообщение;

Файл для импорта не найден или не читается: theme.s css.

Я не использую webpack, только tsconfig и angular .jon

Где файл theme.s css содержит переменные:

$border-radius: 10px;
$main: rgb(20, 100, 192);

Answer 1

Импорт .scss файла в другие .scss файлы

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

Ваш путь активов по умолчанию должен быть

"assets": [
              "src/favicon.ico",
              "src/assets"
            ]

, который определен в файле angular.json.

Пример:

• У вас есть app.component.scss
• Ваш theme.scss файл находится в ./src/assets/theme/theme.scss

Затем вы импортируете его в app.component.scss как:

@import '../assets/theme/theme.scss';

Укажите опцию препроцессора стиля для сократить импорт

Если вы хотите сократить путь, как вы описали, вы просто добавляете путь к stylePreprocessorOptions в файле angular.json:

"architect": {
        "build": {
          ...
          "options": {
            ...
            "stylePreprocessorOptions": {
              "includePaths": [
                "./src/assets/style/theme"
              ]
            },
         },
         "test": {
           ...
           "options": {
             ...
             "stylePreprocessorOptions": {
               "includePaths": [
                 "./src/assets/style/theme"
               ]
             }
           }
         }
}

Тогда вы должны быть возможность включить ваш файл, например @import 'theme.scss';

• Для получения дополнительной информации прочитайте это: https://github.com/angular/angular-cli/wiki/stories-global-styles
• Официальная документация: https://angular.io/guide/workspace-config
• Источник, который я использовал: Как указать короткий путь к файлу в Angular?

Обновление после изменения описания

Полагаю вы установить неверный относительный путь. Поэтому вам нужно установить stylePreprocessorOptions следующим образом:

"includePaths": ["./src/lib"]

в build и test

После установки вы можете вставить туда любой файл темы и :

./src/lib/theme.scss и импортируйте его как @import 'theme.scss';