Question

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

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

@import 'variables'

当我运行服务时，我收到以下错误：

./ SRC /应用/ 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文件的stylePreprocessorOptions部分中创建一个options条目。您无需使用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

谢谢所有人：

在一个新的角度v6中：导入sass文件与以前的版本相比有点不同。

我只需要在组件

中导入这样的内容

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

现在一切正常

感谢大家的帮助

如何以角度6导入sass文件

2 个答案:

angular.json

styles.sass