阅读angular-cli文档和关于堆栈溢出的一些讨论我已经明白,当项目使用生成的组件完成时,内联样式将默认包含在构建中,但是当我构建我的项目时,似乎没有包含任何内联样式。
例如,这个组件:
import { MenubarService } from '../../services/menubar-service/menubar.service'
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css'],
providers:[LoginService]
})
export class LoginComponent implements OnInit {
constructor(.......
最终项目中不存在login.component.css文件。我注意到它有两个原因:
首先,我的应用程序的风格与我使用“服务”时的风格不同。命令和第二,因为使用浏览器检查器元素我找不到我的CSS的痕迹。
这是我的angular-cli的配置文件
{
"project": {
"version": "1.0.0-beta.18",
"name": "genioimprese"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"images",
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"styles.css",
"paper.css"
],
"scripts": [],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"addons": [],
"packages": [],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
}
}
}
除了一些样式和资产外,它显然是新的agular-cli项目的默认文件。我认为我的配置文件中出现了问题,但我找到的唯一文档是here,而且我找不到任何可以帮助我的内容。
a{
color: #0c699e;
}
a:hover,a:active,a:focus{
color: #218fce;
}
.login{
text-align: center;
background-color: white;
height: 100%;
padding-top: 7%;
}
.login > .logo{
height: 30%;
width: 50%;
}
.input[type='text']{
background-color: grey;
color: #218fce;
border: none;
border-radius: 0;
}
h4{
color: #218fce;
}
.form-group{
margin-bottom: 10px;
}
form{
margin-bottom: 0px;
}
.checkbox-inline{
margin: 0;
}