Ошибка компиляции файла SCSS с angular/material@15

Я пытаюсь создать файл css, используя следующий файл client.scss. Я получаю ошибки компиляции.

@use '../../../node_modules/@angular/material' as mat;
@use '../../../node_modules/@angular/material/theming';

$branding-url-root: 'https://localhost:8080/resources/';
$brand-font: 'montserrat';
$brand-primary-color: #037fb0;

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,700&display=swap');

$custom-typography: mat.define-typography-config(
        $font-family: $brand-font+', sans-serif'
);

body {
  font-family: $brand-font;
}

@include mat.core($custom-typography);
@include mat.all-legacy-component-typographies();
@include mat.legacy-core($custom-typography);

$md-client: (
        50 : #E1F0F6,
        100 : #B3D9E7,
        200 : #81BFD8,
        300 : #4FA5C8,
        400 : #2992BC,
        500 : transparentize($brand-primary-color, 0.0),
        600 : transparentize($brand-primary-color, 0.0),
        700 : #026CA0,
        800 : #026297,
        900 : #014F87,
        A100 : #B3DBFF,
        A200 : #80C2FF,
        A400 : #4DAAFF,
        A700 : #349EFF,
        contrast: (
                50 : #000000,
                100 : #000000,
                200 : #000000,
                300 : #ffffff,
                400 : #ffffff,
                500 : #ffffff,
                600 : #ffffff,
                700 : #ffffff,
                800 : #ffffff,
                900 : #ffffff,
                A100 : #000000,
                A200 : #000000,
                A400 : #000000,
                A700 : #000000,
        )
);

$client-app-primary: mat.define-palette($md-client);
$client-app-warn:    mat.define-palette($md-client);
$client-app-theme:   mat.define-light-theme($client-app-primary, $client-app-primary, $client-app-warn); //, $client-app-accent, $client-app-warn);

app-header #header-toolbar.mat-toolbar{
  display: none;
  background-image: url($branding-url-root+'public/client_Logo.png');
}

app-header #product-name {
  color: #505050;
}

@include mat.all-legacy-component-themes($client-app-theme);

.mat-stroked-button:not([disabled]) {
  border-color: $brand-primary-color;
  border-width: 2px;
}

Ниже приведены команды, которые я выполнил для компиляции файла scss.

npm install
npm install @angular/[email protected]
npm install @angular/[email protected]
npm install -g [email protected]
sass client.scss brand-theme.css

Сообщение об ошибке:

drwxr-xr-x 8 root root  4096 May 31 04:53 node_modules
-rw-r--r-- 1 root root 43311 May 31 04:53 package-lock.json
-rwxr-xr-x 1 root root  2167 May 31 05:00 client.scss
sh-4.2# sass client.scss brand-theme.css
Error: Can't find stylesheet to import.
  ╷
2 │ @use '@material/button/button' as mdc-button;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  ../node_modules/@angular/material/button/_button-theme.scss 2:1               @use
  ../node_modules/@angular/material/core/density/private/_all-density.scss 2:1  @forward
  ../node_modules/@angular/material/_index.scss 18:1                            @use
  client.scss 1:1                                                               root stylesheet

Не могли бы вы помочь мне в решении проблемы?

ОБНОВЛЕНИЕ 07 июня 2023 г.:

У меня есть простой abc.scss следующего содержания:

@use '@angular/material' as mat;
@include mat.core();

Создан файл config.sassrc со следующим содержимым:

{
    "includePaths": [
        "./node_modules"
    ]
}

и файл package.json:

{
  "name": "fol1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@angular/material": "^15.2.9"
  }
}

Вот структура папок, которая у меня есть:

Вот сообщение об ошибке, в котором говорится, что не удается найти таблицу стилей для импорта

Теперь, когда я пытаюсь обновить файл abc.scss, чтобы включить относительный путь для включения node_modules

@use './node_modules/@angular/material' as mat;
@include mat.core();

то я получаю эту новую ошибку

Я думаю, что config.sassrc не работает. Как вы сказали, основная проблема заключается в том, что sass не может найти папку node_modules для импорта таблиц стилей. Можете ли вы помочь мне, если я что-то пропустил?

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
2
0
100
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Если вы недавно обновили свой angular до v15, вы можете проверить эту документацию, которую они предоставили: https://material.angular.io/guide/mdc-migration

Это не работает.

Ravi 06.06.2023 11:25
Ответ принят как подходящий

Похоже, здесь есть пара проблем. Давайте рассмотрим их шаг за шагом:

  1. Ошибка говорит о том, что не удается найти таблицу стилей для импорта. Это означает, что указанный вами путь к оператору импорта неверен или файл не существует. Убедитесь, что путь к вашему каталогу node_modules указан правильно. Относительный путь, который вы используете в операторе импорта, должен правильно вести к каталогу node_modules из вашего файла client.scss. В вашем случае проверьте правильность пути '../../../node_modules/@angular/material'. Количество требуемых «../» будет зависеть от расположения вашего файла client.scss относительно папки node_modules.

  2. Операторы импорта для Angular Material не должны иметь полного пути. Вместо этого они должны выглядеть так:

@use '@angular/material' as mat;
@use '@angular/material/theming';

Эти строки используются для импорта всего Angular Material и тем. Система управления пакетами npm обрабатывает расположение этих пакетов, поэтому вам не нужно указывать полный путь.

  1. Чтобы SASS нашел папку node_modules, ему часто требуется файл конфигурации, чтобы указать, где искать. Например, это может быть файл .sassrc, в котором вы указываете опцию includePaths.

Например:

{
    "includePaths": [
        "node_modules"
    ]
}

Если это не решит вашу проблему, пожалуйста, дайте мне знать!

ОБНОВЛЕНИЕ 07 июня 2023 г.:

Спасибо, что поделились обновленной информацией. Я подозреваю, что проблема может быть связана с использованием файла .sassrc.

Существуют разные способы сообщить Sass об опции includePaths, в зависимости от того, как вы используете Sass.

  1. Если вы используете Dart Sass из командной строки, вам нужно использовать параметр --load-path вместо создания файла .sassrc. Попробуйте запустить следующую команду:
sass --load-path=node_modules abc.scss abc.css
  1. Если вы используете Node Sass с такой системой сборки, как webpack или gulp, вы должны указать эту опцию в конфигурации сборки.

  2. Если вы используете Dart Sass через его JavaScript API, вы можете указать эту опцию в своей конфигурации.

Учитывая, что вы используете Dart Sass из командной строки, вариант 1 должен вам подойти.

Если вы используете систему сборки или Dart Sass через JavaScript API, дайте мне знать, чтобы я мог предоставить более индивидуальное решение.

Спасибо за ваш ответ. Я обновил вопрос с вашим предложением, но все равно не повезло. Вы видите мой обновленный вопрос в разделе - ОБНОВЛЕНИЕ 07 июня 2023 г.:

Ravi 07.06.2023 11:12

Привет, только что отредактировал мой ответ, посмотри.

Retired Account 07.06.2023 11:26

Первый вариант sass --load-path=node_modules abc.scss abc.css работал нормально. Спасибо большое. Вы сэкономили мое время. Я изо всех сил пытался сделать это за последнюю неделю, просматривая N вопросов о стеке, статье и т. д.

Ravi 07.06.2023 12:40

Пожалуйста! :)

Retired Account 07.06.2023 13:02

Большинство или все ваши двадцать девять ответов с тех пор, как вы присоединились 12 дней назад, скорее всего, были полностью или частично написаны ИИ (например, ChatGPT). Имейте в виду, что публикация материалов, созданных искусственным интеллектом, здесь запрещена. Если вы использовали инструмент ИИ, чтобы помочь с каким-либо ответом, я бы посоветовал вам удалить его.

NotTheDr01ds 12.06.2023 19:30

Читатели должны тщательно и критически рассмотреть этот ответ, поскольку информация, сгенерированная ИИ, часто содержит фундаментальные ошибки и дезинформацию. Если вы наблюдаете проблемы с качеством и/или у вас есть основания полагать, что этот ответ был сгенерирован искусственным интеллектом, пожалуйста, оставьте соответствующий отзыв. Команда модераторов может использовать вашу помощь для выявления проблем с качеством.

NotTheDr01ds 12.06.2023 19:30

Другие вопросы по теме