Amy*_*hip 15 css typescript angular-cli angular
默认情况下,Angular 2将CSS编译为JavaScript,尤其是在Angular-CLI中使用WebPack时.我宁愿这不会因为几个原因而发生.
第一个原因是,当我开发时,我发现能够在开发人员工具中确切地看到特定样式规则来自哪个样式表以及它所在的行号是非常有帮助的.第二个原因是我认为将CSS编译成代码有点错过了好的CSS,这就是你可以使用不同的样式表并使用相同的标记具有完全不同的外观和感觉.
是否有一个标志,我可以设置将CSS留在.css文件中,它属于哪个IMO？
这是封装组件的重点.
一个组件应该有它自己的样式封装它,所以它可以随样式一起提供.
想象一下,你想发布一个你的组件供别人使用,它不应该有自己的风格吗？
这意味着Angular需要一种方法将这些css链接到组件,从而将它们分成块并将它们注入head标签.
要解决您的问题,您有几个选择:
1-不使用仿真封装:
默认情况下,组件具有名为encapsulation的属性,该属性设置为Emulated,您需要将其更改为None:
@Component({
encapsulation:ViewEncapsulation.None
})
然后,您可以将所有css放在head标签中,就像使用普通的html页面一样.
2-如果问题是主题,您可以使组件成为主题.
您可以为组件设置主题属性,然后根据该更改设置样式:
@Component({
selector:'my-component',
styles:[
`
:host{
[theme="blue"]{
change what ever you want :
h1{
color:blue;
}
}
}
`
]
})
然后,使用此组件将是:
<my-component [attr.theme]='"blue"'></my-component> // would be blue theme
<my-component></my-component> // would be default
转到您的基本Html文件(注入根模块,主应用程序)并链接标题部分中的CSS样式表.
Webpack不会将其包含在已编译/组合的css文件中,该文件将被注入页面.css文件仍将在运行时包含在浏览器中.
<html>
<head>
<base href="/">
<meta charset="utf-8">
<title>dummy</title>
<meta name="viewport" content="width=device-width">
//was not injected/modified by webpack
<link rel="apple-touch-icon" sizes="57x57" href="app/images/apple-icon-57x57.png">
//webpack's injected this below from other components's imported/inline css rules
<link href="index-c2cacb5fa3dfbca6116f4e4e63d5c3c7.css" rel="stylesheet"></head>
| 归档时间： |
|
| 查看次数： |
5132 次 |
| 最近记录： |