如何在 Angular 6 中导入 sass 文件

Question

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

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

@import 'variables'

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

./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

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

Answer 1

我意识到这是一个较老的问题，但在搜索中不断出现，所以我认为更新是为了。有一种方法可以为 SASS 定义自己的导入路径，例如 node_modules 库，您需要做的就是在 angular.json 文件的 options 部分中创建一个 stylePreprocessorOptions 条目。您不需要使用 src\sass 包含所有内容

angular.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": []
},

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

styles.sass

注意：不要包含文件扩展名或初始 ~。

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

Answer 2

在新的 Angular v6 中，导入 sass 文件与之前的版本略有不同。

我只需要像这样导入（在组件样式表中）

@import "~src/sass/variables";    // note: without file extension

现在一切正常

感谢大家的帮助