如何在角度 6 中导入 sass 文件

Question

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

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

@import 'variables'

当我运行ng服务时，出现以下错误：

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

@import 'variables'
^
File to import not found or unreadable: variables.
in C:UsersBongeDocumentsProjectsmovies_databasemovies-clientsrcappapp.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条目。您不需要使用srcsass包含所有内容

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

现在一切正常

谢谢大家的帮助

Answer 3

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

在"架构师"-->"构建"-->"选项"中：

"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";

Answer 4

如果你想将引导程序的断点函数导入到单个组件的scss中，你可以这样做

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