39 vue中scoped属性作用域

vue中scoped属性作用域

作用: 让样式在局部生效, 防止冲突。
写法: <style scoped> </style>


    - 样式：为解决多个组件之间，样式名称的冲突，使用 scoped 属性可以确定只作用与当前组件范围。
        - 如果样式名称冲突，则最终的结果是：导入组件的顺序，前者会被覆盖掉。

            source
                    import School from './components/School';
                    import Student from './components/Student';

                    School>.demo{background-color: skyblue;...}
                                    ↑（覆盖）
                    Student>.demo{background-color: orange;...}
            
            scoped
                    import School from './components/School';
                    import Student from './components/Student';

                    School>.demo{background-color: skyblue;...}(只作用当前组件)
                    Student>.demo{background-color: orange;...}(只作用当前组件)
            
                    scoped的原理是：
                        - 类名[data-v-random]{...}
            lang
                    用于指定样式区域使用的样式编译语言,如果不写默认css。
                    ps:
                        - css
                        - less	（less-loader）
                        - sass	（sass-loader）

lang 属性

用于指定样式区域使用的样式编译语言,如果不写默认css。
    ps:
        - css
        - less	（less-loader）（预编译）
        - sass	（sass-loader）（预编译）

less-loader

PS D:\Working\study_vue\使用脚手架\单文件组件\sverdr> npm view less-loader versions
[
  '0.1.0',  '0.1.1',  '0.1.2',  '0.1.3',  '0.2.0',
  '0.2.1',  '0.2.2',  '0.5.0',  '0.5.1',  '0.6.0',
  '0.6.1',  '0.6.2',  '0.7.0',  '0.7.1',  '0.7.2',
  '0.7.3',  '0.7.4',  '0.7.5',  '0.7.6',  '0.7.7',
  '0.7.8',  '2.0.0',  '2.1.0',  '2.2.0',  '2.2.1',
  '2.2.2',  '2.2.3',  '3.0.0',  '4.0.0',  '4.0.1',
  '4.0.2',  '4.0.3',  '4.0.4',  '4.0.5',  '4.0.6',
  '4.1.0',  '5.0.0',  '6.0.0',  '6.1.0',  '6.1.1',
  '6.1.2',  '6.1.3',  '6.2.0',  '7.0.0',  '7.0.1',
  '7.0.2',  '7.1.0',  '7.2.0',  '7.2.1',  '7.3.0',
  '8.0.0',  '8.1.0',  '8.1.1',  '9.0.0',  '9.1.0',
  '10.0.0', '10.0.1', '10.1.0', '10.2.0', '11.0.0'
]
PS D:\Working\study_vue\使用脚手架\单文件组件\sverdr> npm install less-loader

added 15 packages in 7s
PS D:\Working\study_vue\使用脚手架\单文件组件\sverdr> 
PS D:\Working\study_vue\使用脚手架\单文件组件\sverdr> 

less-loader使用

<style scoped lang="less">
    // less 可以嵌套书写样式
    .test{
        padding: 10px;
        border: 4px solid rgb(40, 67, 107);
        border-radius: 5px;

        .title{
            font-size: 22px;
        }
    }
</style>

Less 更多点我