У меня меня есть файл material.less, в котором я объявил переменные. Теперь хочу использовать их в компонентах, но приложение позволяет делать @import только в app.component.less, а в дочерних компонентах отказывается видеть глобальный файл.
@material-primary: #2196f3; //light-blue accent-3
@material-accent: #00897b; // teal darken-1
@material-warning: #ff6d00; // orange accent-4
@material-disabled: #a7a7a7;
// Mode: Phone
@phone: 360px;
@phone-area: 350px;
// Mode: Tablet
@tablet: 768px;
@tablet-area: 750px;
// Mode: Desktop
@desktop: 1024px;
@desktop-area: 970px;
Итак, что я пробовал?
Самое очевидное - в файле bottom-navigation.component.less делаю
@import "..../assets/styles/material-theme";
Ошибка такая:
@import "..../assets/styles/material-theme"; ^ Can't resolve './..../assets/styles/material-theme.less' in 'D:....\src\app\components\layout\bottom-navigation' in D:....\src\app\components\layout\bottom-navigation\bottom-navigation.component.less (line 1, column 0) ERROR in ./src/app/components/layout/bottom-navigation/bottom-navigation.component.ts Module not found: Error: Can't resolve './.../assets/styles/material-theme.less' in 'D:.....\src\app\components\layout\bottom-navigation' i 「wdm」: Failed to compile.
В файле bottom-navigation.component.ts пытаюсь подключить дополнительный файл
styleUrls: [ './bottom-navigation.component.less', '.../assets/styles/material-theme.less' ]
Ошибка такая:
ERROR in ./src/app/components/layout/bottom-navigation/bottom-navigation.component.ts Module not found: Error: Can't resolve './.../assets/styles/material-theme.less' in 'D:...\src\app\components\layout\bottom-navigation' i 「wdm」: Failed to compile. i 「wdm」: Compiling...
Пытаюсь сделать файл глобальным, объявив его в angular.json
"test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "src/test.ts", "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.spec.json", "karmaConfig": "src/karma.conf.js", "styles": [ "src/assets/styles/material-theme.scss", "src/assets/styles/material-theme.less", "src/assets/styles/app.less" ], "scripts": [], "assets": [ "src/favicon.ico", "src/assets" ] } },
Нет результата.
Сделал компонент полностью нейтральным, с независимыми цветами.
.toolbar-item{ &.active{ color: #000; mat-icon{ color: #000; } .toolbar-item-text { color: #000; } } mat-icon{ color: #aaaaaa; } .toolbar-item-text{ color: #aaaaaa; }
в app.less переопределяю
.toolbar-item {
&.active {
color: @material-primary;
mat-icon {
color: @material-primary;
}
.toolbar-item-text {
color: @material-primary;
}
}
mat-icon {
color: @material-disabled;
}
.toolbar-item-text {
color: @material-disabled;
}
}
но внезапно стили компонента в браузере гасят глобальный стиль, и я в пролёте.
Как настроить импорт стилей в компоненты для LESS, и только LESS?
styleUrls
по стайлаугду ангуляра должен быть один путь к стилю компонента - ВСЕ!stylePreprocessorOptions