作者:icrochildren1035_175 | 来源:互联网 | 2022-12-13 16:09
我用sass创建了新的角度项目,我创建了名为sass的文件夹,其中包含一个名为_variables.scss的文件,
在app组件中我试图导入这样的变量.
@import 'variables'
当我运行服务时,我收到以下错误:
./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
我仍然得到同样的错误:我在这里做错了什么?任何帮助
1> Andy Braham..:
我意识到这是一个较旧的问题,但不断出现在搜索中,所以我认为更新是有序的.有一种方法可以为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;
像魅力一样工作!!非常感谢
你真了不起
项目内部的@RTYX。
.architect.build.options
2> Hot Zellah..:
谢谢所有人:
在一个新的角度v6:导入sass文件与以前的版本有点不同.
我只需要在组件中导入这样的东西
@import "~src/sass/variables"; // note: without file extension
现在一切正常
谢谢大家的帮助