angular2+ 组件中用@import进来的css不起作用
一般来说是作用域的问题,首先你应该先看标签内是否有angular2内置生成的自定义属性比如:
在我们的@Component中,这三个是基本的设置。

页面上的标签会生成带有 _nghost-c1 和 _ngcontent-c1 如下图:

对应在memumanager组件上的样式和@import进来的样式都会带上 [_ngcontent-c1] 这个作用域,如下图:

因而,如果你用Js新创建的DOM并插入到节点的时候,可能你新创建的DOM并没有带这个作用域,对应你写得样式就会不起作用;
或者这个组件的样式是common的css,当被其他组件引入的时候,因为作用域的原因,也会导致样式的失效。
而当我们设置了 encapsulation: ViewEncapsulation.None

页面就会把 _nghost-c1 和 _ngcontent-c1 这两个作用域去掉,对应Component打包出来的css也没有这个作用域。

angular2+ 组件中用@import进来的css不起作用的更多相关文章
- Angular2 组件
1. 组件说明 Angular2 组件是构成Angular2应用程序的核心部分,Angualr2应用程序本质上来说就是一个组件树,Angular2组件一般由模块,注解,元数据以及组件类组成,实现组件类 ...
- 3.认识Angular2组件之1
简述:组件(component)是构成Angular应用的基础和核心.可以这样说,组件用来包装特定的功能,应用程序的有序运行依赖于组件之间的协同工作. 1. 组件化标准:W3C为了统一组件化的标准方式 ...
- Vue style里面使用@import引入外部css, 作用域是全局的解决方案
问题描述 使用@import引入外部css,作用域却是全局的 <template> </template> <script> export default { na ...
- vue组件如何引入外部.js/.css/.scss文件
可在相应的单vue组件引入相应文件. 1.引入外部.js文件. 2.引入外部.css文件. 使用@import引入外部css,作用域是全局的,也可在相应的单vue组件引入,import并不是引入代码到 ...
- 关于jquery中用函数来设置css样式
关于jquery中用函数来设置css样式 2016-12-21 23:27:55 1.jquery语法 $(selector).css(name,function(index,value)) name ...
- @import url(../image/css)的用法
1.@import url(../image/css);可以加载css文件2.@import url(../image/css);可以写在html里加载css文件,也可以写在css文件里加载css文件 ...
- Vue-Cli 3.x 创建的项目中对 import 引入的 CSS 样式启用 autoprefixer
问题描述: Vue-Cli 3.x 默认开启了 autoprefixer,但对于在 main.js 中通过 import 引入的 CSS 并没有自动添加前缀 分析原因: autoprefixer 在项 ...
- webpack 打包成功,但是css不起作用
问题: webpack 打包成功,但是css不起作用 问题分析/解决: 原因有以下几种 使用了webpack2的语法规则不正确; webpack2要求必须写-loader; 可能是只写了css-loa ...
- css 描述css reset的作用和用途。
描述css reset的作用和用途. 作用 : 因为浏览器的品种很多,每个浏览器的默认样式也是不同的.通过重新定义标签样式.“覆盖”浏览器的CSS默认属性. 有最简单的*{margin:0 ; pa ...
随机推荐
- fatal: Authentication failed for “someurl”
一.前言 我们在公司做项目,很多时候会遇到这个问题:Git failed with a fatal error. Authentication failed for ‘ http// xxx..... ...
- NodeJs学习笔记(四)---单元测试
sailsjs框架用了一段时间了,感觉如果功能复杂了,非常难以处理,想用一下单元测试,看是否能解决问题. sailsjs的官方文档使用的是mocha,我搜索了一些资料,主要参考了朴灵 ...
- c#值类型与引用类型区别
值类型对象的两种表示方式:未装箱和已装箱,引用类型总是处于已装箱 值类型从System.ValueType派生.该类型提供了与System.Object相同方法,但System.ValueType重写 ...
- 《程序设计方法》【PDF】下载
内容简介 <程序设计方法>主要以方法为主导,结合C语言,把程序设计方法学研究中若干成熟的理论和方法用通俗易懂的语言描述出来.<程序设计方法>还选取趣味性强.技巧性高.能够启发学 ...
- iOS App稳定性指标及监测
一个App的稳定性,主要决定于整体的系统架构设计,同时也不可忽略编程的细节,正所谓"千里之堤,溃于蚁穴",一旦考虑不周,看似无关紧要的代码片段可能会带来整体软件系统的崩溃.尤其因为 ...
- php通过system()调用Linux命令问题
最近在做php和linux crontab的联调,发现php在linux下的权限问题需要引起注意,调试问题的过程中发现有许多问题前人说的比较零散,我在这里汇总,顺带抛砖引玉一下. 1.$result= ...
- 【Zookeeper】源码分析目录
Zookeeper源码分析目录如下 1. [Zookeeper]源码分析之序列化 2. [Zookeeper]源码分析之持久化(一)之FileTxnLog 3. [Zookeeper]源码分析之持久化 ...
- Time Complexity of Loop with Powers
以下功能的时间复杂度是多少? void fun(int n, int k) { for (int i=1; i<=n; i++) { int p = pow(i, k); for (int j= ...
- C#又能出来装个B了。一步一步微信跳一跳自动外挂
PS:语言只是载体.思维逻辑才是王道 前天看见了个python的脚本.于是装python.配置环境变量.装pip.折腾了一上午,最终装逼失败. 于是进入博客园,顶部有篇文章吸引了我 .NET开发一个微 ...
- bzoj 3626: [LNOI2014]LCA
Description 给出一个n个节点的有根树(编号为0到n-1,根节点为0).一个点的深度定义为这个节点到根的距离+1.设dep[i]表示点i的深度,LCA(i,j)表示i与j的最近公共祖先.有q ...