vue3之less或者 sass 与scoped

vue3之less或者 sass 与scoped

vue3之sass

• 安装：
  第一步：yarn add sass
  第二步：yarn add sass-loader@10.0.5 -D

基础使用

<template>
  <div class="test">
    我是num -- {{ num }}
    <button class="btn" @click="num++">修改num</button>
  </div>
</template>

<script setup lang="ts">
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
console.log('setup')
let num = ref<Number>(0)
</script>
<style lang="scss" scoped>
.test {
   height: 100px;
  background: pink;
 .btn {
  color: #ff0;
 }
}
</style>

vue3之less

• 安装：
  yarn add less less-loader -D

基础使用

<template>
  <div class="test">
    我是num -- {{ num }}
    <button class="btn" @click="num++">修改num</button>
  </div>
</template>

<script setup lang="ts">
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
console.log('setup')
let num = ref<Number>(0)
</script>
<style lang="less" scoped>
.test {
  height: 100px;
  background: pink;
  .btn {
    color: #ff0;
  }
}
</style>

修改 elemeng-plus样式

vue2.0
::v-deep .el-dialog__header { }

vue3.2
::v-deep(.el-dialog__header){ }