[英]Angular 4 - Not use styles from angular-cli.json
I have an angular 4 application where I have the global styles and scripts in angular-cli.json. 我有一个angular 4应用程序,我在angular-cli.json中有全局样式和脚本。 Then I worked separately on the Landing page.
然后我在登陆页面上单独工作。 After I turn the landing page into an angular component, I add all its styles in angular-cli.json as well.
在将着陆页转换为角度组件后,我还将其所有样式添加到angular-cli.json中。 And now my landing page's bootstrap conflicts with global bootstrap in node_modules and my application breaks.
现在我的登陆页面的bootstrap与node_modules中的全局引导程序冲突,我的应用程序中断了。
Currently angular-cli.json looks like this: 目前angular-cli.json看起来像这样:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"./dist/css/landing/bootstrap.min.css",
"./dist/css/landing/font-awesome.min.css",
"styles.css",
"./dist/css/AdminLTE.min.css",
"./dist/css/skins/_all-skins.min.css",
"../node_modules/froala-editor/css/froala_editor.pkgd.min.css",
"../node_modules/froala-editor/css/froala_style.min.css"
],
This is in landing.component.ts: 这是在landing.component.ts中:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-landing',
templateUrl: './landing.component.html',
styleUrls: ['./landing.component.css']
})
export class LandingComponent implements OnInit {
constructor() { }
ngOnInit() { }
}
I am almost missing my deadline, I can not resolve the conflicts between two huge css files. 我几乎错过了我的截止日期,我无法解决两个巨大的CSS文件之间的冲突。 I was wondering if I could keep my Landing Page styles separated from application styles.
我想知道我是否可以将我的着陆页样式与应用程序样式分开。 Any help will be largely appreciated.
任何帮助都将受到很大的赞赏。 Thank you.
谢谢。
You could try encapsulate your landing page as follows. 您可以尝试按如下方式封装目标网页。
ViewEncapsulation.Native
will wrap your component and its styles within a shadow root. ViewEncapsulation.Native
将您的组件及其样式包装在阴影根中。 Change your component style file to scss
and import those styles in component style file and delete them from .angular-cli.json
. 将组件样式文件更改为
scss
并在组件样式文件中导入这些样式,并从.angular-cli.json
删除它们。
@Component({
selector: 'app-landing',
templateUrl: './landing.component.html',
styleUrls: ['./landing.component.scss'],
encapsulation: ViewEncapsulation.Native
})
export class LandingComponent implements OnInit {
constructor() { }
ngOnInit() { }
}
landing.component.scss
@import '<path-to-dist>/dist/css/landing/bootstrap.min.css';
@import '<path-to-dist>/dist/css/landing/font-awesome.min.css';
When you inspect DOM, you'll see app-landing
as encapsulated. 当你检查DOM时,你会看到
app-landing
被封装了。
Edit 编辑
Alternatively, you can use ViewEncapsulation.Emulated
which is default (you do not have to set it within metadata). 或者,您可以使用默认的
ViewEncapsulation.Emulated
(您不必在元数据中设置它)。 What this will do is to create custom attributes with all the styles and add those attributes to your markup as well. 这样做的目的是创建包含所有样式的自定义属性,并将这些属性添加到标记中。 Shadow DOM may not be supported in some browsers.
某些浏览器可能不支持Shadow DOM。 Try both and if
Emulated
works for you, use that. 尝试两者,如果
Emulated
适合您,请使用它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.