如何以角度6导入sass文件 [英] How to Import sass files in angular 6
问题描述
我用sass创建了一个新的角度项目,并创建了一个名为sass的文件夹,其中包含一个名为_variables.scss的文件,
I created new angular project with sass, and I created folder with name sass which contain a file named _variables.scss,
在应用程序组件中,我试图导入这样的变量.
in app component I tried to import variables like this.
@import 'variables'
当我运行ng服务时,出现以下错误:
when I run ng serve i get the following error:
./src/app/app.component.scss 模块构建失败:
./src/app/app.component.scss Module build failed:
@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中添加了以下内容:
Note I added the following to angular.json:
"stylePreprocessorOptions": { "includePaths": [ "src/", "src/sass/" ]
目录结构只是一个有角度的入门应用程序:
Directory structure just a angular starter app:
|- src/
|- sass/
|- _variables.scss
|- _mixins.scss
|- styles.scss
我仍然遇到相同的错误:我在这里做错了什么?任何帮助
still i get the same error: what am I doing wrong here? any help
推荐答案
我意识到这是一个较旧的问题,但是不断出现在搜索中,因此我认为有必要进行更新.有一种方法可以为SASS定义自己的导入路径,例如node_modules
库,您所需要做的就是在angular.json文件的options
部分中创建一个stylePreprocessorOptions
条目.您无需使用src\sass
I realize this is an older question, but keeps coming up in searches so I figure an update is in order. There is a way to define your own import paths for SASS like node_modules
libraries, all you need to do is make a stylePreprocessorOptions
entry in the options
section of the angular.json file. You do not need to include everything using src\sass
"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": []
},
然后按照您的样式,您只需使用
Then in your styles you can simply import them using
注意:请勿包含文件扩展名或首字母~
.
Note: Don't include the file extension or an initial ~
.
@import 'variables'; // Imports from src/sass
@import 'mixins;
这篇关于如何以角度6导入sass文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!