Looking at the angular-cli documentation and some discussion, I realized that when the project is executed with the generated components, the inline styles will be included in the assembly by default, but when I create the project, it seems that none of the inline styles were included.
For example, this component:
Component
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(.......
The login.component.css file is missing from the final project. I noticed this for two reasons:
Firstly, the style of my application is different from the style that I have when I use the "ng serve" command, and secondly, because with the inspector element of the browser I can not find a trace of my css.
This angular-cli configuration file
{
"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. , - , , , , , .
CSS
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;
}