首页 文章

Angular在同一个项目中使用scss / sass和css

提问于
浏览
4

我知道在同一个项目中可以同时使用css和sass / scss . 我已经看过一个问这个问题的SO问题,但是从我看到的内容中,当在angular_cli.json文件中使用css作为styleExt时,会出现很多警告 .

  • 这样做是否值得推荐?

  • 我应该将所有.css文件重命名为sass / scss吗?

  • 什么是最好的scss / sass,我的猜测是scss?

  • 任何推荐的更改/转换程序,只需重命名或是否有必要?

5 回答

  • 2

    如果你看到angular-cli.json, "styles": 是一个数组 . 所以它应该允许我们将多个样式文件添加为逗号分隔的数组 . 这应该删除警告 .

    但是,我认为在您的应用程序中使用类似的样式会更好 . 如果要将所有文件转换为scss / sass,可以通过以下方式执行此操作:

    • 将您的css文件重命名为.scss / .sass . 例如: my-file.cssmy-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

  • 1

    将文件从sass重命名为scss . Scss是世界公认的,sass只是源自css的另一种语言的语法 . 编译器识别scss .

    使用此命令更改项目扩展名

    ng set defaults.styleExt = scss

    手动更改 .angular.json

    "styleExt": "scss"
    

    您也可以手动更改扩展名,没有任何反应 .

  • 1

    1. 在本地风格的情况下,不推荐 . 因此,对于角度中的每个组件来说,处理这两种类型都太复杂了 . 但是对于global styledefer load CSSinline css,您可以选择该选项 .

    对于 2. 3. 如果您已经有一些 .css 代码,请使用 .scss . 每个 .css 代码都可以包含在 .scss 文件中 . 有关详细信息,请阅读this link .

    4.Sourangshu 的回答中有很好的描述https://angular.io/guide/component-styles#component-stylesthe link1.

  • 0

    如果您使用的是最新版本的angular-cli,您应该使用它来将css更改为sass

    ng config schematics.@schematics/angular:component.styleext scss
    
    • 不推荐,但这是可能的 .

    • 是,并在组件中更改它 .

    • 他们很相似 . 主要区别在于语法 . What's the difference between SCSS and Sass?

    • 你应该有变量文件 . 还有一些用于共享样式/ mixin和其他可重用内容的文件夹 .

  • 3

    我发现最好的程序是(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.
    

    它没有任何错误 .

    走!

相关问题