如何在Angular 6中导入Sass文件

Question

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

在app组件中，我尝试像这样导入变量。

@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/" ]

Angular入门应用程序的目录结构：

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

我仍然遇到相同的错误：我在这里做错了什么？需要帮助。

- Hot Zellah

---

请尽可能发布目录结构。 - lealceldeiro

@lealceldeiro，请检查一下，这只是一个新的Angular起始应用程序，没有什么特别的。 - Hot Zellah

尝试将src/styles.css重命名为src/styles.scss，并在该文件中包含您的src/sass目录中的其他样式。如果您喜欢，请查看我的GitHub项目，其中我正在做您现在尝试做的事情。请注意，在angular.json文件中，我设置了"styles": ["src/styles.scss"],。 - lealceldeiro

@lealceldeiro，我已经添加了所有其他可以导入到styles.css的东西，那在组件中怎么样？ - Hot Zellah

我明白了。请看我发布的答案。 - lealceldeiro

Answer 1

我知道这是一个比较旧的问题，但它在搜索中不断出现，所以我认为需要更新。有一种方法可以像node_modules库一样定义自己的SASS导入路径，你只需要在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;

- Andy Braham

---

太有效了！！非常感谢。 - Jagpreet Singh

你很棒。 - Johansrk

@RTYX 内部项目。<你的项目>。架构师。构建选项。 - Sebastiandg7

你太棒了。非常感谢你！！！ - Vương Hữu Thiện

当我使用这个东西时，我得到了“Undefined mixin”的错误。我将我的mixin导入到全局的styles.scss文件中，并在特定组件中使用@include。但是该组件失败了，因为它找不到mixin，尽管变量在组件中起作用。 - RooksStrife

Answer 2

在新版Angular v6中，导入Sass文件与先前版本有些不同。

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

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

现在一切正常运作

感谢所有提供帮助的人

- Hot Zellah

---

现在我对此感到困惑。~应该指的是node_modules文件夹。 - lealceldeiro

这个 Angular CLI v6 真的很不一样，你应该去看看。 - Hot Zellah

非常感谢。互联网上的大多数文章都是基于旧版本的Angular，而它们并没有起作用。非常感谢这个。 - Alf Moh

这不完全正确。使用~会假设它是node_modules文件夹。如果您有另一个在src之外的文件夹，则@Andy Braham的解决方案是正确的。 - Johansrk

这真的帮了我很多，因为我需要在使用url()时在字体源内使用绝对路径。我已经设置好了stylePreprocessorOptions，但它在url()内部无法正常工作。改用~src/前缀解决了所有问题！ - Geoff Davids

Answer 3

对于那些在搜索使用Angular CLI: 13.1.2更新的Angular 13答案的人，你需要在你的angular.json文件中添加:

在"architect"-->"build"-->"options"内：

"stylePreprocessorOptions": {
              "includePaths": [
                "src/styles"
              ]
            }

最终结果将类似于：

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/proyect",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss"
            ],
            "scripts": [],
            "stylePreprocessorOptions": {
              "includePaths": [
                "src/styles"
              ]
            }
          },

类似以下结构的示例：

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

然后在组件中只需使用：

@import "mixins";

- Dylan Moguilevsky

---

Angular（13+）的正确答案！干杯 - Cafn

Answer 4

如果您想将 Bootstrap 的断点函数导入到单个组件的 scss 中，可以像这样操作：

@import '~bootstrap/scss/bootstrap-grid.scss';
@include media-breakpoint-up(md) {
    //do something here
}

- Ahmad Syarif