精华内容
下载资源
问答
  • 我是木瓜太香,今天我们来聊一个 vue 的样式作用域的问题,通常我们开发项目的时候是要在 style 上加上 scoped 来起到规定组件作用域的效果的,所以了解他们的规则也是很有必要的,可以让你更清晰的了解你的项目样式...
  • react css样式作用域的问题

    千次阅读 2019-12-15 13:19:10
    react中的css样式是没有作用域的 import CmtList from '../css/CmtList.css' ; < h1 className = 'title' > 这是评论列表 < / h1 > 那么如何是css样式是有作用域的呢? 2、为css样式添加作用域 像...

    1、下载css,style依赖

    cnpm i style-loader css-loader -D
    

    在 webpack.config.js 中配置

      module: {
            // 第三方匹配规则
            rules: [
                {test: /\.css&/, use: ['style-loader', 'css-loader']}
            ]
        },
    

    在页面中引入,发现当时的css样式是应用于全局的。
    在父组件中导入css样式,在子组件中也可以使用。
    react中的css样式是没有作用域的

    import CmtList from '../css/CmtList.css';
    
    <h1 className='title'>这是评论列表</h1>
    

    那么如何是css样式是有作用域的呢?

    2、为css样式添加作用域

    像添加路由文件一样,在声明运用依赖的同时加上参数
    该参数的作用是时css模块化
    添加后项目则不生效了

        module: {
            // 第三方匹配规则
            rules: [
                {test: /\.css$/, use: ['style-loader', 'css-loader?modules']}
            ]
        },
    

    在加上 modules 参数前,打印导入的css模块是一个空对象
    在加上 modules 参数后,打印导入的css模块是在css中声明的class选择器和id选择器

    说明确实将css文件模块化了

    import CmtList from '../css/CmtList.css'
    console.log(CmtList, 'CmtList');  // {}  导入前
    console.log(CmtList, 'CmtList');  
    //{title: "nETG9GHcF81koGv3lI0nZ"}  导入后
    

    当前css中声明了如下样式,但是到处模块化后发现只有class选择器,没有标签选择器。

    所以只能是id选择器和class选择器可以限定作用域,标签选择器的作用域仍旧是全局

    .title {
        font-size: 11px;
    }
    h1{
        color: red;
    }
    

    修改样式引用

    //模块化前
    <h1 className='title'>这是评论列表</h1>
    //模块化后
    <h1 className={CmtList.title}>这是评论列表</h1>
    

    3、自定义类名生成格式

    注:被模块下后,类名会改变

    生成的类名是这样的,一串乱码不知道是干嘛的,我们可以规定其生成的格式

    {title: "nETG9GHcF81koGv3lI0nZ"}  导入后
    

    在webpack.config.js中配置

        module: {
            // 第三方匹配规则
            rules: [
                {test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/},
                {
                    test: /\.css$/, use: ['style-loader', {
                        loader: "css-loader?modules",
                        options: {
                            modules: {
                               localIdentName: '[path][name]==[local]==[hash:5]',
                            }
                        }
                    }]
                }
            ]
        },
    

    我们在css样式中写的是这样:

    .red {
        color: red;
    }
    
    .green {
        color: green;
    }
    

    被模块化后审查css样式
    在这里插入图片描述
    4、某个css样式不想被模块化,

    //css文件
    :global(.green){
        color: green;
    }
    
    //jsx中又可以使用className=字符串来定义了
    <h1 className='green'>哈哈</h1>
    

    .green属性又变成了全局样式

    注::local(.类名)会被模块化,为默认,一般不用

    5、安装boostrap

    cnpm i bootstrap@3.3.7 -S
    

    如果在引用某个包的时候,这个包被安装到了 node_modules 目录中,可以省略 node_modules 这一层目录,直接以包名开始引入自己的 模块 或 样式表

    import 'bootstrap/dist/css/bootstrap.css'
    

    无法解析字体图标文件,需要下载字体依赖的文件
    在这里插入图片描述

    6、安装字体依赖包

    cnpm i  file-loader -D
    
        module: {
            // 第三方匹配规则
            rules: [
                {test: /\.ttf|woff|woff2|eot|svg$/, use: 'file-loader'},
            ]
        },
    

    当前boostrap的css被模块化了,不可以再使用官网定义的类名了。
    如果 exclude: /node_modules/,则webpack不会编译boostrap样式文件了,也不可以。

    规定:
    第三方的 样式表,都是以 .css 结尾, 这样,我们不要为 普通的 .css 启用模块化
    自己的样式表,都要以 .scss 或 .less 结尾, 只为 .scss 或 .less 文件启用模块化

    cnpm i sass-loader  node-sass -D
    
        module: {
            rules: [
                 // 打包处理 CSS 样式表的第三方loader
                { 
                    test: /\.css$/, use: ['style-loader', 'css-loader']
                },
                  // 打包处理自己的sass样式
                {
                    test: /\.scss$/, use: ['style-loader', {
                        loader: "css-loader?modules", options: {
                            modules: {
                                localIdentName: '[path][name]==[local]==[hash:5]',
                            }
                        }
                    }, 'sass-loader']
                }
            ]
        },
    
    展开全文
  • angular组件样式作用域

    2019-06-13 14:16:52
    表示创建全局样式,会在页面的style标签中创建样式作用域整个DOM ViewEncapsulation.Emulated Angular不会为该组件创建Shadow DOM;样式将被限定于组件;这是封装的默认值。 会在页面头部style标签中看到...

    组件代码

    @Component({
      selector: 'app-quill',
      templateUrl: './quill.component.html',
      styleUrls: ['./quill.component.css',
        '../../../../node_modules/quill/dist/quill.snow.css'],
        encapsulation: ViewEncapsulation.None
    })
    

    构造不再细说,重点是encapsulation配置项,此配置决定样式的作用域;

    encapsulation

    1. ViewEncapsulation.None
      表示创建全局样式,会在页面的style标签中创建样式,作用域整个DOM

    2. ViewEncapsulation.Emulated
      Angular不会为该组件创建Shadow DOM;样式将被限定于组件;这是封装的默认值。
      会在页面头部style标签中看到类似:

      h1[_ngcontent-orm-c0]{
      	color:red;
      }
      
    3. ViewEncapsulation.ShadowDom
      不会再页面头部生成标签,而是在dom中生成一个shadowDom的东西,类似于封装的dom组件,作用域在该组件内有效

    展开全文
  • vue css样式作用域 scope中如何修改element-ui的控件样式 1.我们都知道在vue项目中我们的组件css一般都是写到作用域scoped中,但是我们修改element-ui 控件 比如说el-input的样式时 我们找到当前的class 去改写 不起...

    vue css样式作用域 scope中如何修改element-ui的控件样式

    1.我们都知道在vue项目中我们的组件css一般都是写到作用域scoped中,但是我们修改element-ui 控件 比如说el-input的样式时 我们找到当前的class 去改写 不起作用
    2.直接上代码 使用 样式穿透 这样既保证了样式不被污染 又可以改变当前使用ui库的样式 不只是能修改 element的 所有的ui库都适用

    <style scoped>
    >>> .el-input {
      width: 178px;
    }
    >>> .el-input__inner {
      background: #000000;
      border: 1px solid #262628;
      outline: 0;
    
      color: #d8d9da;
      border-radius: 0 3px 3px 0;
    }
    >>> .el-input__inner:focus {
      border-color: #262628;
      outline: none;
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 5px #5794f2;
    }
    <style >
    
    展开全文
  • Vue.js 组件css样式作用域

    千次阅读 2018-08-01 14:52:18
    App.vue文件中普通的去定义的css样式,而子组件未定义css样式,App.vue文件中的css样式会影响其他的 子组件 的样式 当 子组件 中定义了 css样式,子组件的样式会覆盖 App.vue 中的样式 想要每个组件的 css...

    App.vue文件中普通的去定义的css样式,而子组件未定义css样式,App.vue文件中的css样式会影响其他的 子组件 的样式


    当 子组件 中定义了 css样式,子组件的样式会覆盖  App.vue 中的样式

     

    想要每个组件的 css 样式都是独立的,就在 <style> 标签上加上 scoped 

    <style scoped>
      h1{
        color: #F00;
      }
    </style>

    这样,组件与组件之间的 css样式 只能作用于自己

     

    如果您有什么不明白的地方其它想问的可以关注我的公众号,给我留言,我会尽可能的帮您解决遇到的问题

    ps:如果您对摄影感兴趣,也可以关注我的公众号,不定时会分享自己的摄影经验调色设定,欢迎交流,哈哈哈哈哈

     

    展开全文
  • 上图就是一个在当前页添加样式的例子,用到了csoped,你只要添加,就形成了当前页的作用域, 如果不加,将会变成下图这样: 举个例子 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210607143526564.png ...
  • 我是木瓜太香,今天我们来聊一个 vue 的样式作用域的问题,通常我们开发项目的时候是要在 style 上加上 scoped 来起到规定组件作用域的效果的,所以了解他们的规则也是很有必要的,可以让你更清晰的了解你的项目样式...
  • 二、样式作用域 1、全局样式 把样式写在App.xaml中即可 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ...
  • 设置作用域也可以通过 CSS Modules, 那是一个基于 class 的类似 BEM 的策略 <template> <button class="button button-close">X</button> </template> <!-- 使用 `scoped` attrib...
  • angular encapsulation 的三种使用方式 ...1.对angular 组件渲染,每个组件有一个自己的作用域,比如 h标签在引用时 在a组件里定义了样式,这是在b组件使用h标签时 无法使用其已经定义好的样式,这...
  • css样式作用域的问题(modules,localIdentName, local 和 global) 在 React项目中 使用 bootsrtap( 使用 sass ) React 中 绑定事件 React中双向绑定事件(e.target.value 和 this.refs.txt.value) React...
  • vue中css的作用域

    千次阅读 2019-12-17 11:11:57
    在vue的开发中,为了不让局部样式污染全局样式,引入css的作用域 当<style>标签有scoped属性时,它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它有一些注意事项,但不需要任何 ...
  • css作用域问题

    2020-06-29 11:33:24
    1.scoped作用域问题。 (1)组件内样式,默认始终加上scoped属性。如:<style scoped lang=”less”></style>; (2)需要影响到子组件内部样式,优先使用深度作用选择器/deep/。如: <style lang=...
  • React的作用域样式 获取由组件目录界定CSS类 它与CSS模块有何不同? 在CSS模块中,您必须手动导入和分配类 import styles from './button.styl' ; const Button = ( ) => ( < button className = { styles . foo...
  • 作用域的css

    千次阅读 2018-09-17 11:26:51
    有一点值得注意一下,在一个组件中可以同时使用有作用域和无作用域样式: < style > /* 全局样式 */ style > < style scoped > /* 本地样式 */ style > 子元素样式是子元素的根元素和子...
  • 所在:在vue.js中,的作用域在本html页面,样式作用域则是全局(即所有html页面),由 于我把其中一个html页面的中的scoped去掉,这个页面的样式就变成了全局样式,当其它页面和这些全 局样式重class名时,样式会...
  • react中css设置作用域

    千次阅读 2019-01-09 15:14:35
    react中使用普通的css样式表会造成作用域的冲突,css定义的样式作用域是全局,在Vue 中我们还可以使用scope来定义作用域,但是在react中并没有指令一说,所以只能另辟蹊径了。下面我将简单记录并介绍一下在webpage...
  • //modules参数表示为普通css样式表,启用模块化 { test: /\.css$/,use:['style-loader','css-loader?modules']} 使用 //导入列表组件需要的样式表 import cssobj from '@/css/cmtlist.css' 1111111111111 ...
  • 关于ES6中let 和 const 命令的用法以及注意事项:中的报错的样式ES6 引入了块级作用域,明确允许在块级作用域之中声明函数。ES6 规定,块级作用域之中,函数声明语句的行为类似于let,在块级作用域之外不可引用。
  •   最近在做vue的webpack框架的时候,发现@import导入的样式在调试的阶段是没有问题的,但是在打包发布到nginx上面之后里面的样式居然会影响到全局。这个时候我的眼前亿万一个草泥马就过去了。   后来就是在网络...
  • 我学习有一个习惯,就是在用的时候一定要搞清楚一些基本问题,要不然稀里糊涂的,脑子里没有一根...1.VUE中,作用域及作用范围?  使用Vue来开发HTML时,作用域与VUE对象的定义密切相关,一个html中,可以有多个VU...
  • CSS作用域样式分割)的使用 在vue中,让css样式只在当前组件中生效:scoped 属性是 HTML5 中的新属性,是一个布尔属性,如果使用该属性,则样式仅仅应用到 style 元素的父元素及其子元素。 二、scoped的实现原理 ...
  • 关于Angular的每一个组件的样式,有两种设置方式 使用内联的组建样式 言简意赅的说就是,在每个组件的类文件中,在@Component的元数据的style数组中定义这个组件的样式,在新建一个组件的时候,Angular/cli 会将...
  • 1.、父组件不能直接影响子组件; 2、子组件本身样式的优先级最高;...3、全局样式的优先性大于继承的样式; 4、非直属关系的样式互不影响; 转载于:https://www.cnblogs.com/skylen/p/9674156.html...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 64,740
精华内容 25,896
关键字:

样式作用域