Angular - как настроить файлы s css, чтобы вам не нужно было указывать полный путь?

Question

Я создаю приложение с NativeScript 6.4.1 и Angular 8.

Мне нужно импортировать переменные sass во все файлы css моего компонента.

component.s css

@import '../../../css/variables';

.sidedrawer-header {
    background-color: $vivid_cerulean;
    padding: 50px;
}

.sidedrawer-content {
    background-color: $vivid_cerulean2;
}

_variables.s css

$navy_blue: #105195;
$vivid_cerulean: #28abe2;
$white: #ffffff;
$dark_navy_blue: #063260;
$light_grey: #eeeeee;
$error_red: #eb2026;
$vivid_cerulean2: #3eb4e5;

Я вижу, что операторы импорта могут быть громоздкими в будущем со всеми различными путями.

Есть ли способ сделать оператор импорта более понятным?

Мне бы хотелось, чтобы это было примерно так:

@import '~variables'

В моем проекте есть webpack.config. js file и agular. json file.

Answer 1

Вы можете взглянуть на документацию Дополнительные опции сборки и тестирования для stylePreprocessorOptions .

Из Angular документации:

Чтобы добавить пути, используйте параметр stylePreprocessorOptions:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "cli": {
    "packageManager": "npm"
  },
  "projects": {
    "your-project": {
      "root": "projects/",
      "sourceRoot": "projects/src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "assets": [],
            "stylePreprocessorOptions": {
              "includePaths": []
            },
            "styles": [],
            "scripts": []
          },

Файлы в этой папке, такие как src / style-paths / _variables.s css, могут быть импортированы из любого места в вашем проекте без необходимости относительный путь:

// src/app/app.component.scss
// A relative path works
@import '../style-paths/variables';
// But now this works as well
@import 'variables';

И, кстати, путь тильды (~) используется для пути node_modules StackOverflow