Angular - 如何配置 scss 文件以便您不需要包含完整路径？

Question

我正在使用 NativeScript 6.4.1 和 Angular 8 构建应用程序。

我需要将我的 sass 变量导入到我的所有组件 scss 文件中。

组件.scss

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

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

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

_variables.scss

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

我发现 import 语句在未来可能会因为所有不同的路径而变得繁琐。

有没有办法让 import 语句更简洁？

我希望它是这样的：

@import '~variables'

我的项目有一个 webpack.config.js 文件和一个 agular.json 文件。

Answer 1

您可以查看Additional build and test options 的文档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.scss，可以从项目中的任何位置导入，而无需相对路径：

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

波浪号 (~) 用于 node_modules 路径 StackOverflow