如何在 Angular 6 中导入 sass 文件

Posted 2023-03-07

【中文标题】如何在 Angular 6 中导入 sass 文件

【英文标题】：How to Import sass files in angular 6

【发布时间】：2018-11-25 11:35:32

【问题描述】：

我用 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

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

【问题讨论】：

请尽可能发布目录结构。

@lealceldeiro 检查它只是一个新的 Angular Starter 应用程序没什么特别的

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

@lealceldeiro 我添加了所有其他我可以将所有这些东西导入到styles.css，在组件中怎么样？

我明白了。请参阅answer I posted。

【参考方案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;

【讨论】：

工作就像魅力！非常感谢

你太棒了

这是针对 Angualr 7 更新的吗？我不知道该放在哪个“选项”部分（构建？服务器？测试？全部？）

项目中的@RTYX。.architect.build.options

我的问题是特定于构建 Angular Universal 应用程序。在现有项目中使用ng add @nguniversal/express-engine --clientProject MYPROJECT 后，运行npm run build:s-s-r 后出现导入错误。解决方案是将"stylePreprocessorOptions": "includePaths": [ "src/<myStylesFolder>" ] , 添加到新添加的server 定义的options 部分。无需其他更改。

【参考方案2】：

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

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

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

现在一切正常

感谢大家的帮助

【讨论】：

现在我对此感到困惑。 ~ is supposed to refers to the node_modules folder.

这个 Angular cli v6 完全不同，看看吧

非常感谢。互联网上的大多数文章都是基于旧版本的 Angular 并且它们不起作用。非常感谢这个

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

这对我很有帮助，因为我需要使用 url() 在字体源中使用绝对路径。我已经设置了 stylePreprocessorOptions，但它在 url() 中不起作用。使用 ~src/ 前缀对所有内容进行排序！