Почему @use в моих файлах s css не работает в моем проекте Angular 9.1.0? - PullRequest
Новая
       38

Почему @use в моих файлах s css не работает в моем проекте Angular 9.1.0?

2 голосов
/ 02 апреля 2020

Я в процессе обновления проекта Angular 8.2.14 до Angular 9.1.0. До сих пор я успешно использовал ng update для переноса всех файлов в самую последнюю версию Angular. Однако, чтобы это обновление было успешным, я также должен обновить библиотеки, используемые в этом проекте. Одной из этих библиотек является ' Веб-компоненты материалов для Angular' (@ angular -mdc / web).

В этой библиотеке есть руководство по началу работы для того, чтобы иметь возможность правильно его реализовать. Это включает в себя изменение файла 'angular. json' для установки следующего: 

"stylePreprocessorOptions": {
    "includePaths": [
        "node_modules/"
    ]
},

Это руководство по началу работы также включает в себя начало реализации @use вместо @import в моем * .s css файлы, чтобы используемые компоненты имели надлежащий стиль.

Проблема, однако, заключается в том, что это @use, похоже, не работает.

Например, в руководстве по началу работы В примере указывается, что в файл styles.s css необходимо добавить следующее: 

@use './styles/body';

@use '@material/theme' with (
    $primary: #6200ee,
    $secondary: #faab1a,
    $background: #fff,
);

// MDC Typography
@use '@material/typography/mdc-typography';

// MDC Button
@use './styles/button';

// Angular MDC
@use '@angular-mdc/theme/material';

А затем при создании файла в styles / _body.s css я должен добавить: 

// Override user agent body margin for mdc-top-app-bar
body {
  margin: 0;
}

Однако при этом стиль, добавленный к тегу body, не используется или вообще не отображается в браузере. Как будто весь файл не используется при компиляции стилей.s css.

Поэтому мой вопрос: что нужно отрегулировать, чтобы можно было использовать @use в * .s css файлы в моем Angular 9.1.0 проекте?

Пример StackBlitz можно найти здесь

1 Ответ

0 голосов
/ 21 апреля 2020

Похоже, это связано с sass-loader, как указано в этом билете. https://github.com/webpack-contrib/sass-loader/issues/804

В настоящее время существует обходной путь настройки веб-пакета.

...