作者:lrz76597 | 来源:互联网 | 2022-12-18 15:44
我刚刚使用新的Angular CLI 6.0创建了一个新的Angular项目,但我需要将Sass编译添加到我的项目中.我知道你可以在创建项目时设置一个标志,但我的项目已经创建并且已经完成了工作.
现在调用使用新Angular CLI生成的新配置文件angular.json
而不是angular-cli.json
.该文件的方案也有所不同,具有新属性.
在旧的angular-cli.json
有一个部分,你可以这样设置stylExt
,
"defaults": {
"styleExt": "scss"
}
但是我不知道究竟要把它放在哪里,因为在"test"
和"lint"
属性之后,给出了一个lint错误:
Matches multiple schemas when only one must validate.
和建筑产品:
Schema validation failed with the following errors:
Data path "['defaults']" should NOT have additional properties(styleExt).
看看CLI的文档,我没有看到任何可以指示放置位置的内容"styleExt"
.
我已经看到其他答案建议:ng set defaults.styleExt scss
哪个抛出get/set have been deprecated in favor of the config command.
.
我试过ng config set defaults.styleExt scss
并且npm config set defaults.styleExt scss
前者抛出错误而后者显然对文件没有影响,但没有错误.
1> Dico..:
正是做了Smokey Dawson所评论的,
"projects": {
"angular-app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
},
"architect": {...}
}
}
以上是结果.因此,在您的应用程序中,在密钥下schematics
,添加@schematics/angular:component
密钥styleext
设置为的密钥scss
.
这应该应用于angular.json
项目根目录中的文件.
并在`angular.json`中更改`src/styles.css`对`src/styles.scss`的引用
[angular-workspace](https://github.com/angular/angular-cli/wiki/angular-workspace),[@ schematics/angular:component](https://github.com/angular/angular-cli/ blob/v6.0.0-rc.8/packages /%40angular/cli/lib/config/schema.json#L74-L144),[styleext](https://github.com/angular/angular-cli/blob/ V6.0.0-rc.8 /包/%40angular/CLI/lib中/配置/ schema.json#L108-L112)
2> Mohamed Alla..:
在Angular 6中,它更容易.编译自动处理!那怎么样?要在组件级别使用scss,您需要使用扩展名scss命名该文件(同样适用于less,styl).在你的component.ts中你也将相应的样式更改为scss.
这是来自doc的剧本:
![在此输入图像描述](https://img.php1.cn/3cd4a/18ace/696/1d8e759bd3e6bbec.jpeg)
要在全局范围内使用Scss(src/styles.css),那么你需要将styles.css更改为styles.scss(同样适用于less,styl等).然后你继续使用angular.json并将旧的styles.css更改为新的styles.scss值.如下图所示:
![在此输入图像描述](https://img.php1.cn/3cd4a/1eebe/cd5/443b30bb45e66690.webp)
这里是第一部分文档的链接,用于想要探索自己的文档:https:
//angular.io/guide/component-styles#non-css-style-files
现在如何设置,ng-cli所以在生成新组件时,扩展名默认为scss?
使用以下ng config
命令:
ng config schematics.@schematics/angular:component.styleext scss
这将更新angular.json:
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
}
这相当于旧的angular-cli.json
defaults: {
"styleext": "scss"
}
这是针对已经启动但未设置为默认为scss的项目.如果要创建新项目,请使用该选项--style
指定如下:
ng new my-project --style=scss
并且您不必使用precedent命令,它是一个允许我们更新angular.json文件中指定字段的config命令(因为它已经设置好了).