0

Angular.json片段：

"root": "",
  "sourceRoot": "src",
  "prefix": "ra",
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.app.json",
        "aot": false,
        "assets": [
          "src/assets",
          "src/favicon.ico",
        ],
        "styles": [
          "src/styles.scss"
        ],
        "stylePreprocessorOptions": {
          "includePaths": ["assets/scss"]
        },
      }

Angular 新手，我认为我有一个简单的问题，但只是不了解scss编译的内部工作原理。我在我的根styles.scss组件中导入了一些scss 。这是styles.scss中的内容：

@import './assets/scss/global';

这是_global.scss中的内容：

@import './variables';

这是该文件的内容：

$spacer-4: 0.25em; //4px
$spacer-6: 0.375em; //6px
$spacer-8: 0.5em; //8px
$spacer-10: 0.625em; //10px
$spacer-12: 0.75em; //12px
$spacer-16: 1em; //16px
$spacer-20: 1.25em; //20px
$spacer-24: 1.5em; //24px
$spacer-30: 1.875em; //30px
$spacer-32: 2em; //32px
$spacer-36: 2.25em; //36px

问题出在组件的 scss 文件中，该文件引用了其中一个变量。从组件抛出错误：

ERROR in ./src/navigation/app-navigation/app-navigation.component.scss    

Module build failed (from ./node_modules/sass-loader/lib/loader.js):

margin-top: $spacer-10;
           ^
  Undefined variable.

如果我没有收到找不到文件的编译时错误，那么我不应该看到这个错误，对吧？

这是应用程序的文件结构：

-- src
    -- app
        -- navigation
            --app-navigation
                -- app-navigation.component.scss
    -- assets
        -- scss
            -- _global.scss
            -- _variables.scss
    -- styles.scss
4

1 回答 1

3

你的问题是开始的顺序。您的默认 styles.scss 是顺序中的最后一行，因此您的组件在推断时没有对变量/全局变量的引用。

要修复它，您只需添加对组件本身的导入引用，以便它可以在需要时接收这些变量。这为将一些表示层架构规则应用于您的用途提供了一个很好的案例。例如对于变量，我建议将其保留为仅包含 var 的文件，因为它们不会转换，然后您可以在需要这些 var 的地方引用它，并且没有任何重复的 CSS，就像您在 globals 文件中有任何实际的 CSS 一样在编译的资产中。

我建议如果你还没有stylePreprocessorOptions在 angular.json 中添加到你的构建配置中，并且有一个固定的 ref 路径到你的目录，其中包含 global 这样的文件，所以你不必每次使用它时都创建绝对路径（不要忘记在 angular.json 中将声明添加到您的“服务”配置中），例如；

"stylePreprocessorOptions": {
   "includePaths": [
      "assets/sass/"
    ]
},

然后说你的组件 scss 文件你只添加@import 'variables'，它会根据需要提供 var 值。或者，您可以执行整个路径，但这可能会使维护变得痛苦，但只要确保您的路径正确@import '../../variables';，并且在您的组件 scss 中它也将提供变量，但我强烈建议在 angular.json 中设置导入路径.

希望这会有所帮助，干杯！

于 2020-03-25T15:18:21.973 回答