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 ...
随机推荐
- immutable.js 更新数组(mergeDeepWith)
使用情境: 技术栈为:react + redux + antd (reducer中处理数据使用了immutable.js). 问题:如下图,做一个搜索功能,form表单每改变一次,都会调用一个upda ...
- Nginx干货(二)配置详解
此篇就不矫情了.直接上个配置吧.以后若有更新,继续修补 /usr/local/nginx/conf目录下面的nginx.conf文件 以用户nginx的身份来运行 user nginx; 启动进程,通 ...
- 在nginx上部署vue项目(history模式);
在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...
- Bootstrap学习笔记(二)---常见工具和流程导航范例
使用bootstrap框架避免不了写CSS,当CSS文件较大时,会发现维护起来很麻烦,一些默认值,如行高.背景色.标注颜色.字号等信息往往反复出现,还有一些大体上一致,只有小部分不同的样式定义,这就需 ...
- 实现我博客旁边的线条效果 html canvas-nest.js 源码
canvas-nest.js 这个js文件可以用来实现炫酷的线条与鼠标进行交互的功能,具体效果如图所示 js具体源码如下: /** * Copyright (c) 2016 hustcc * Lice ...
- javaweb添加拦截器
js请求后台代码添加拦截器: package com.ctzj.biz.isale.deploy.controller; import java.io.IOException; import java ...
- iOS开发--数据库管理CoreData的使用
CoreData是iOS5后,苹果提供的原生的用于对象化管理数据并且持久化的框架.CoreData本质上是将底层数据库封装成对象进行管理.但数据库实际上只是CoreData的一个功能,并不是全部功能. ...
- bzoj 5016: [Snoi2017]一个简单的询问
Description 给你一个长度为N的序列ai,1≤i≤N和q组询问,每组询问读入l1,r1,l2,r2,需输出 get(l,r,x)表示计算区间[l,r]中,数字x出现了多少次. Input 第 ...
- vue.js之过滤器,自定义指令,自定义键盘信息以及监听数据变化
一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 ...
- sar 命令详解
sar (System Activity Reporter)命令是LInux下系统运行状态统计工具, 它将指定的操作系统状态计数器显示到标准输出设备. sar 工具将对系统当前的状态进行取样,然后通过 ...