如何在 Angular 6 中导入 sass 文件

我用 sass 创建了新的角度项目，并创建了名为 sass 的文件夹，其中包含一个名为 _variables.scss 的文件，

在应用程序组件中，我尝试导入这样的变量。

@import 'variables'

当我运行 ngserve 时出现以下错误：

./src/app/app.component.scss 模块构建失败：

@import 'variables'
^
      File to import not found or unreadable: variables.
      in C:\Users\Bonge\Documents\Projects\movies_database\movies-client\src\app\app.component.scss (line 1, column 1)

注意我将以下内容添加到 angular.json 中：

"stylePreprocessorOptions": { "includePaths": [ "src/", "src/sass/" ]

目录结构只是一个有角度的入门应用程序：

|- src/
    |- sass/
        |- _variables.scss
        |- _mixins.scss
        |- styles.scss

我仍然遇到同样的错误：我在这里做错了什么？任何帮助

我意识到这是一个较旧的问题，但在搜索中不断出现，因此我认为更新是适当的。有一种方法可以为 SASS 定义自己的导入路径，例如node_modules图书馆，您所需要做的就是制作一个stylePreprocessorOptions条目在optionsangular.json 文件的部分。您不需要使用以下内容包含所有内容src\sass

角度.json

"options": {
  "outputPath": "dist/App",
  "index": "src/index.html",
  "main": "src/main.ts",
  "polyfills": "src/polyfills.ts",
  "tsConfig": "src/tsconfig.app.json",
  "assets": [
    "src/favicon.ico",
    "src/assets"
  ],
  "styles": [
    "src/sass/styles.scss"
  ],
  "stylePreprocessorOptions": {
    "includePaths": [
      "src/sass"
    ]
  },
  "scripts": []
},

然后在您的样式中，您可以简单地使用导入它们

样式.sass

注意：不要包含文件扩展名或首字母~.

@import 'variables'; // Imports from src/sass
@import 'mixins;