我知道在同一个项目中可以同时使用css和sass / scss . 我已经看过一个问这个问题的SO问题,但是从我看到的内容中,当在angular_cli.json文件中使用css作为styleExt时,会出现很多警告 .
这样做是否值得推荐?
我应该将所有.css文件重命名为sass / scss吗?
什么是最好的scss / sass,我的猜测是scss?
任何推荐的更改/转换程序,只需重命名或是否有必要?
如果你看到angular-cli.json, "styles": 是一个数组 . 所以它应该允许我们将多个样式文件添加为逗号分隔的数组 . 这应该删除警告 .
"styles":
但是,我认为在您的应用程序中使用类似的样式会更好 . 如果要将所有文件转换为scss / sass,可以通过以下方式执行此操作:
将您的css文件重命名为.scss / .sass . 例如: my-file.css 到 my-file.scss .
my-file.css
my-file.scss
在每个相应的 .component.ts 文件中,使用 .scss/.sass filename更新 styleUrls . 例如: styleUrls: ['my-file.css'] 到 styleUrls: ['my-file.scss']
.component.ts
.scss/.sass
styleUrls
styleUrls: ['my-file.css']
styleUrls: ['my-file.scss']
将 angular-cli.json 中的 styles:[ "styles.css"], 更改为 styles:["styles.scss], ,应该这样做!
angular-cli.json
styles:[ "styles.css"],
styles:["styles.scss],
你可以在这里了解更多关于sass / scss的信息:Sass Lang Guide
将文件从sass重命名为scss . Scss是世界公认的,sass只是源自css的另一种语言的语法 . 编译器识别scss .
使用此命令更改项目扩展名
ng set defaults.styleExt = scss
手动更改 .angular.json :
.angular.json
"styleExt": "scss"
您也可以手动更改扩展名,没有任何反应 .
1. 在本地风格的情况下,不推荐 . 因此,对于角度中的每个组件来说,处理这两种类型都太复杂了 . 但是对于global style,defer load CSS或inline css,您可以选择该选项 .
对于 2. 3. 如果您已经有一些 .css 代码,请使用 .scss . 每个 .css 代码都可以包含在 .scss 文件中 . 有关详细信息,请阅读this link .
4. 在 Sourangshu 的回答中有很好的描述https://angular.io/guide/component-styles#component-styles和the link在 1.
如果您使用的是最新版本的angular-cli,您应该使用它来将css更改为sass
ng config schematics.@schematics/angular:component.styleext scss
不推荐,但这是可能的 .
是,并在组件中更改它 .
他们很相似 . 主要区别在于语法 . What's the difference between SCSS and Sass?
你应该有变量文件 . 还有一些用于共享样式/ mixin和其他可重用内容的文件夹 .
我发现最好的程序是(Angular 5):首先克隆你的存储库 .
1. find . -name "*.css" -exec bash -c 'mv "$1" "${1%.css}".scss' - '{}' \; 2. Vscode: find .css replace to .scss 3. npm install to make sure that .css files in the node_modules are not messed up.
它没有任何错误 .
走!
5 回答
如果你看到angular-cli.json,
"styles":
是一个数组 . 所以它应该允许我们将多个样式文件添加为逗号分隔的数组 . 这应该删除警告 .但是,我认为在您的应用程序中使用类似的样式会更好 . 如果要将所有文件转换为scss / sass,可以通过以下方式执行此操作:
将您的css文件重命名为.scss / .sass . 例如:
my-file.css
到my-file.scss
.在每个相应的
.component.ts
文件中,使用.scss/.sass
filename更新styleUrls
. 例如:styleUrls: ['my-file.css']
到styleUrls: ['my-file.scss']
将
angular-cli.json
中的styles:[ "styles.css"],
更改为styles:["styles.scss],
,应该这样做!你可以在这里了解更多关于sass / scss的信息:Sass Lang Guide
将文件从sass重命名为scss . Scss是世界公认的,sass只是源自css的另一种语言的语法 . 编译器识别scss .
使用此命令更改项目扩展名
手动更改
.angular.json
:您也可以手动更改扩展名,没有任何反应 .
1. 在本地风格的情况下,不推荐 . 因此,对于角度中的每个组件来说,处理这两种类型都太复杂了 . 但是对于global style,defer load CSS或inline css,您可以选择该选项 .
对于 2. 3. 如果您已经有一些 .css 代码,请使用 .scss . 每个 .css 代码都可以包含在 .scss 文件中 . 有关详细信息,请阅读this link .
4. 在 Sourangshu 的回答中有很好的描述https://angular.io/guide/component-styles#component-styles和the link在 1.
如果您使用的是最新版本的angular-cli,您应该使用它来将css更改为sass
不推荐,但这是可能的 .
是,并在组件中更改它 .
他们很相似 . 主要区别在于语法 . What's the difference between SCSS and Sass?
你应该有变量文件 . 还有一些用于共享样式/ mixin和其他可重用内容的文件夹 .
我发现最好的程序是(Angular 5):首先克隆你的存储库 .
它没有任何错误 .
走!