Я пытаюсь создать файл 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 для импорта таблиц стилей. Можете ли вы помочь мне, если я что-то пропустил?






Если вы недавно обновили свой angular до v15, вы можете проверить эту документацию, которую они предоставили: https://material.angular.io/guide/mdc-migration
Похоже, здесь есть пара проблем. Давайте рассмотрим их шаг за шагом:
Ошибка говорит о том, что не удается найти таблицу стилей для импорта. Это означает, что указанный вами путь к оператору импорта неверен или файл не существует. Убедитесь, что путь к вашему каталогу node_modules указан правильно. Относительный путь, который вы используете в операторе импорта, должен правильно вести к каталогу node_modules из вашего файла client.scss. В вашем случае проверьте правильность пути '../../../node_modules/@angular/material'. Количество требуемых «../» будет зависеть от расположения вашего файла client.scss относительно папки node_modules.
Операторы импорта для Angular Material не должны иметь полного пути. Вместо этого они должны выглядеть так:
@use '@angular/material' as mat;
@use '@angular/material/theming';
Эти строки используются для импорта всего Angular Material и тем. Система управления пакетами npm обрабатывает расположение этих пакетов, поэтому вам не нужно указывать полный путь.
.sassrc, в котором вы указываете опцию includePaths.Например:
{
"includePaths": [
"node_modules"
]
}
Если это не решит вашу проблему, пожалуйста, дайте мне знать!
ОБНОВЛЕНИЕ 07 июня 2023 г.:
Спасибо, что поделились обновленной информацией. Я подозреваю, что проблема может быть связана с использованием файла .sassrc.
Существуют разные способы сообщить Sass об опции includePaths, в зависимости от того, как вы используете Sass.
sass --load-path=node_modules abc.scss abc.css
Если вы используете Node Sass с такой системой сборки, как webpack или gulp, вы должны указать эту опцию в конфигурации сборки.
Если вы используете Dart Sass через его JavaScript API, вы можете указать эту опцию в своей конфигурации.
Учитывая, что вы используете Dart Sass из командной строки, вариант 1 должен вам подойти.
Если вы используете систему сборки или Dart Sass через JavaScript API, дайте мне знать, чтобы я мог предоставить более индивидуальное решение.
Спасибо за ваш ответ. Я обновил вопрос с вашим предложением, но все равно не повезло. Вы видите мой обновленный вопрос в разделе - ОБНОВЛЕНИЕ 07 июня 2023 г.:
Привет, только что отредактировал мой ответ, посмотри.
Первый вариант sass --load-path=node_modules abc.scss abc.css работал нормально. Спасибо большое. Вы сэкономили мое время. Я изо всех сил пытался сделать это за последнюю неделю, просматривая N вопросов о стеке, статье и т. д.
Пожалуйста! :)
Большинство или все ваши двадцать девять ответов с тех пор, как вы присоединились 12 дней назад, скорее всего, были полностью или частично написаны ИИ (например, ChatGPT). Имейте в виду, что публикация материалов, созданных искусственным интеллектом, здесь запрещена. Если вы использовали инструмент ИИ, чтобы помочь с каким-либо ответом, я бы посоветовал вам удалить его.
Читатели должны тщательно и критически рассмотреть этот ответ, поскольку информация, сгенерированная ИИ, часто содержит фундаментальные ошибки и дезинформацию. Если вы наблюдаете проблемы с качеством и/или у вас есть основания полагать, что этот ответ был сгенерирован искусственным интеллектом, пожалуйста, оставьте соответствующий отзыв. Команда модераторов может использовать вашу помощь для выявления проблем с качеством.
Это не работает.