angular cli build 不包含 css 组件 [英] angular cli build does not include css component
问题描述
阅读 angular-cli 文档和关于堆栈溢出的一些讨论我明白,当一个项目使用生成的组件完成时,默认情况下内联样式将全部包含在构建中,但是当我构建我的项目时,似乎没有包含任何内联样式.
例如这个组件:
Reading the angular-cli documentation and some discussion on stack overflow I had understand that when a project is done with generated components, the inline styles will be all included in the build by default, but when I build my project it seems that none of the inline styles were included.
For example this 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(.......
login.component.css 文件不存在于最终项目中.我注意到它有两个原因:
首先很明显,我的应用程序的风格与我使用 'ng serve' 命令时的风格不同,其次是因为使用浏览器检查器元素我找不到我的 css 痕迹.
这是我的 angular-cli 的配置文件
the login.component.css file is not present in the final project. I have noticed it for two reason:
First clearly the style of my app is different from the one that I have when I use 'ng serve' command and second because with the browser inspector element I don't find trace of my css.
That's my angular-cli's 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
}
}
}
除了一些样式和资产,它显然是一个新的 angular-cli 项目的默认文件.我认为我的配置文件有问题,但我找到的唯一文档是这里,并且我没有找到任何对我有帮助的东西.
except for some styles and assets it's clearly the default file of a new angular-cli projects. I think there's something wrong in my configuration file but the only documentation that I found is here, and I didn't find anything that helps me.
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;
}
推荐答案
我知道这是一个老问题,但 Angular 的 CLI 现在包含了一些 CSS 优化选项,这些选项刚刚导致我的应用程序的全局样式表输出为 media=print代码>.
I know this is an old question but Angular's CLI now includes some CSS optimization options which just now caused my app's global stylesheet to output as media=print
.
尽管没有打印 MQ,但此媒体属性显然不会导致应用任何样式.
Despite having NO print MQs, this media attr obviously causes no styles to be applied.
<link rel="stylesheet" ... href="styles.css" media="print">
"architect": ...
"build": ...
"configurations": {
"dev": {
...
"optimization": {
"scripts": true,
"styles": {
"minify": true,
"inlineCritical": false <--- fix
},
"fonts": true
}
这篇关于angular cli build 不包含 css 组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!