Vue学习笔记46--scoped样式 + less

scoped样式

<!-- 组件的默认样式 css写法 -->
<!-- <style scoped>
.demo {
  background-color: cadetblue;
}
</style> -->
 
<style lang="less" scoped>
.demo {
  background-color: cadetblue;
  .myfontsize {
    font-size: 40px;
  }
}
</style>

scoped样式总结：

作用：让样式在局部生效，防止冲突
写法：<style scoped>

查看webpack版本信息： npm view webpack versions

略

查看less-loader版本信息：npm view less-loader versions

安装less-loader：npm i less-loader@7

如遇到问题：Error: Cannot find module ‘less’

执行：npm i less

示例一：

School.vue

<!-- 组件的结构 -->
<template>
  <div class="demo">
    <h3>学校姓名：{{name}}</h3>
    <h3>学校地址：{{ address }}</h3>
 
  </div>
</template>
 
<!-- 组件交互相关的代码(数据、方法等) -->
<script>
export default ({
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Student',
  data () {
    return {
      name: '高新一小',
      address: '西安/高新一小'
    }
  },
 
})
</script>
 
<!-- 组件的样式 scoped局部样式，否则多个vue组件中同名会导致样式覆盖(将使用最后一个引入的组件样式)-->
<style scoped>
.demo {
  background-color: burlywood;
}
</style>

Student.vue

<!-- 组件的结构 -->
<template>
  <div class="demo">
    <h3 click="showName">学生姓名：{{name}}</h3>
    <h3 class="myfontsize">学生性别：{{ age }}</h3>
 
  </div>
</template>
 
<!-- 组件交互相关的代码(数据、方法等) -->
<script>
export default ({
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Student',
  data () {
    return {
      msg: '我正在学习 Vue',
      name: '心仪',
      age: 6
    }
  },
 
})
</script>
 
<!-- 组件的默认样式 css写法 -->
<!-- <style scoped>
.demo {
  background-color: cadetblue;
}
</style> -->
 
<style lang="less" scoped>
.demo {
  background-color: cadetblue;
  .myfontsize {
    font-size: 40px;
  }
}
</style>

App.vue

<template>
  <div>
    <!-- <img src="./assets/logo.png"> -->
    <h2 class="title">Vue你好</h2>
    <Student></Student>
    <hr>
    <School></School>
 
  </div>
</template>
 
<script>
// 引入组件
import Student from './components/Student.vue';
import School from './components/School.vue';
export default {
  name: 'App',
  components: {
    Student,
    School
  },
}
</script>
 
<style scoped>
.title {
  background-color: brown;
}
</style>

main.js

// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'
// 配置提示
Vue.config.productionTip = false
 
new Vue({
  render: h => h(App),
}).$mount('#app')