blocks|key|2650683|text|如果您看到angular-cli.json，则"styles":是一个数组。因此，它应该允许我们将多个样式文件添加为逗号分隔的数组。这应该会删除警告。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2650684|但是，我认为在您的应用程序中使用类似的样式会更好。如果要将所有文件转换为scss/sass，可以使用以下方法：|2650685|2650686|将css文件重命名为.scss/.sass。例如：my-file.css要my-file.scss.|ordered-list-item|2650687|In每个相应的.component.ts文件，请用.scss/.sass文件名更新styleUrls。例如:+to+styleUrls:+['my-file.scss']|2650688|Change+styleUrls:+['my-file.css']+styles:[+"styles.css"],+in+angular-cli.json+to+styles:["styles.scss],，这应该可以了！|2650689|2650690|你可以在这里了解更多关于sass/scss的信息：Sass+Lang+Guide|2650691|entityMap|0|LINK|mutability|MUTABLE|url|http://sass-lang.com/guide^0|N|9|0|0|0|P|B|11|C|0|7|D|P|B|15|9|1M|R|0|7|Q|Y|N|1P|G|29|M|0|0|P|F|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|14|8|@]|D|@]|E|$]]|$1|I|3|J|5|K|7|15|8|@$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@]|E|$]]|$1|L|3|M|5|K|7|1A|8|@$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|N|3|O|5|K|7|1J|8|@$9|1K|A|1L|B|C]|$9|1M|A|1N|B|C]|$9|1O|A|1P|B|C]|$9|1Q|A|1R|B|C]]|D|@]|E|$]]|$1|P|3|-4|5|6|7|1S|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1T|8|@]|D|@$9|1U|A|1V|1|1W]]|E|$]]|$1|S|3|-4|5|6|7|1X|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]]]

If you see angular-cli.json, <code>"styles":</code> is an array. So it should allow us to add multiple style files as a comma-separated array. That should remove the warnings. 

However, I think it is better to have similar styles across your application. If you want to convert all your files to scss/sass, you can do so in the following way:

<ol>
<li>Rename your css file to .scss/.sass. Eg: <code>my-file.css</code> to <code>my-file.scss</code>.</li>
<li>In each corresponding <code>.component.ts</code> file, update the <code>styleUrls</code> with <code>.scss/.sass</code> filename. Eg: <code>styleUrls: ['my-file.css']</code> to <code>styleUrls: ['my-file.scss']</code></li>
<li>Change the <code>styles:[ "styles.css"],</code> in <code>angular-cli.json</code> to <code>styles:["styles.scss],</code>, and that should do it!</li>
</ol>

You can learn more about sass/scss here: <a href="http://sass-lang.com/guide" rel="nofollow noreferrer">Sass Lang Guide</a>

blocks|key|2650715|text|1.在本地样式的情况下，不推荐使用。因为在angular中同时处理两种类型的组件太复杂了。但对于global+style、defer+load+CSS或inline+css，您可以选择as选项。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2650716|对于2.+3.如果你已经有一些.css代码，请使用.css。每个.css代码都可以包含在.scss文件中。更多详细信息，请阅读this+link。|2650717|answer+4.在Sourangshu's+answer和1中的https://angular.io/guide/component-styles#component-styles和the+link中有很好的描述。|2650718|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/angular/angular-cli/wiki/stories-global-styles|1|https://www.giftofspeed.com/defer-loading-css/|2|https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery|3|https://stackoverflow.com/q/5654447/6627660|4|https://angular.io/guide/component-styles#component-styles|5^0|0|2|1C|C|0|1P|E|1|24|A|2|0|2|5|F|4|P|4|W|4|18|5|1R|9|3|0|A|A|U|26|X|1M|4|2K|8|5|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@$9|13|A|14|1|15]|$9|16|A|17|1|18]|$9|19|A|1A|1|1B]]|E|$]]|$1|F|3|G|5|6|7|1C|8|@$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]|$9|1J|A|1K|B|C]|$9|1L|A|1M|B|C]]|D|@$9|1N|A|1O|1|1P]]|E|$]]|$1|H|3|I|5|6|7|1Q|8|@$9|1R|A|1S|B|C]|$9|1T|A|1U|B|C]]|D|@$9|1V|A|1W|1|1X]|$9|1Y|A|1Z|1|20]]|E|$]]|$1|J|3|-4|5|6|7|21|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]|R|$5|M|N|O|E|$P|S]]|T|$5|M|N|O|E|$P|U]]|V|$5|M|N|O|E|$P|W]]|X|$5|M|N|O|E|$P|Y]]|Z|$5|M|N|O|E|$P|Q]]]]

1. In local style case, it is not recommendable. Becasue it is too complex to handle both type for every components in angular. But for <a href="https://github.com/angular/angular-cli/wiki/stories-global-styles" rel="nofollow noreferrer">global style</a> , <a href="https://www.giftofspeed.com/defer-loading-css/" rel="nofollow noreferrer">defer load CSS</a> or <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery" rel="nofollow noreferrer">inline css</a>, you can choose that as option.

For 2. 3. Use .scss if you already have some .css codes. Every .css code can be included in .scss files. For more details, please read <a href="https://stackoverflow.com/q/5654447/6627660">this link</a>.

4. There are good descriptions in Sourangshu's answer and <a href="https://angular.io/guide/component-styles#component-styles" rel="nofollow noreferrer">https://angular.io/guide/component-styles#component-styles</a> and <a href="https://github.com/angular/angular-cli/wiki/stories-global-styles" rel="nofollow noreferrer">the link</a> in 1.

blocks|key|4318|text|如果您使用的是angular-cli的最新版本，则应使用此命令将css更改为sass|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4319|ng+config+schematics.@schematics/angular:component.styleext+scss|code-block|syntax|javascript|4320|不推荐使用|4321|，但这是可能的。在components.|ordered-list-item|4322|They中使用|4323|是和更改它是相似的。主要区别在于语法。What's+the+difference+between+SCSS+and+Sass?|offset|length|4324|You应该有变量的文件。和一些文件夹，用于共享样式/混合和其他可重复使用的内容。|4325|4326|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/5654447/whats-the-difference-between-scss-and-sass^0|0|0|0|0|0|J|18|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|14|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|15|8|@]|9|@]|A|$]]|$1|L|3|M|5|K|7|16|8|@]|9|@]|A|$]]|$1|N|3|O|5|K|7|17|8|@]|9|@$P|18|Q|19|1|1A]]|A|$]]|$1|R|3|S|5|K|7|1B|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

If you are using the latest version of angular-cli you should use this for changing css to sass

<pre><code>ng config schematics.@schematics/angular:component.styleext scss
</code></pre>

<ol>
<li>Is not recommendable, but this is possible.</li>
<li>Yes and change it in components.</li>
<li>They are similar. The main difference is in syntax.
<a href="https://stackoverflow.com/questions/5654447/whats-the-difference-between-scss-and-sass">What&#39;s the difference between SCSS and Sass?</a></li>
<li>You should have file for variables. And some folder for shared styles/mixins and other reusable things.</li>
</ol>

blocks|key|2650762|text|我发现最好的步骤是(Angular+5)：首先克隆你的仓库。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2650763|1.+find+.+-name+"*.css"+-exec+bash+-c+'mv+"$1"+"${1%25.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.|code-block|syntax|javascript|2650764|它工作正常，没有任何错误。|2650765|去!|2650766|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I found out that the best procedure was (Angular 5): Clone U'r repository first.

<pre><code>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.
</code></pre>

And it worked without ANY errors.

GO!

I know it's possible to use both css and sass/scss in the same project.
I've looked at a SO question where this was asked, but from what I saw there was a lot of warnings popping up when using css as styleExt in the angular_cli.json file.

<ol>
<li>Is it recommendable to do so?</li>
<li>Should I rename all .css files to sass/scss?</li>
<li>What is best scss/sass, my guess is scss?</li>
<li>Any recommended procedure for the change/conversion, just renaming or is it necessary?</li>
</ol>

Angular using scss/sass and css in the same project

我知道在同一个项目中同时使用css和sass/scss是可能的。我已经查看了一个问题，但从我看到的情况来看，在angular_cli.json文件中使用css作为styleExt时，会弹出许多警告。是否建议这样做？我是否应该将所有.css文件重命名为sass/scss?What是最好的scss/sass，我猜是scss...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular在同一项目中使用scss/sass和cssEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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