Question

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

Answer 1

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

要修复此问题，您只需向组件本身添加导入引用，这样它就可以在需要时接收这些var。这是将一些表示层体系结构规则应用于您的使用的很好案例。例如，对于变量，我建议将其保留为仅包含var的文件，因为它们不会进行翻译，然后可以在需要这些var且没有重复CSS的地方引用它，就像在globals文件中有任何实际CSS一样在已编译资产中。

我建议您是否尚未将stylePreprocessorOptions添加到angular.json的构建配置中，并在目录中使用固定引用路径保存目录（例如全局文件），因此不必分别创建绝对路径您使用它的时间（不要忘了也将声明添加到angular.json中的“ serve”配置中）；

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

然后说您的组件scss文件仅添加@import 'variables'，它将根据需要提供var值。或者，您可以执行整个路径，但是这会使维护工作变得很痛苦，但是只需确保路径正确@import '../../variables';就可以了，并且在组件scss中使用它也可以提供var，但我强烈建议使用{{3} }中的内容。

希望这会有所帮助，加油！

组件在.scss文件中找不到变量

1 个答案: