前端培训丁鹿学堂：vite+vue开发中使用css方式汇总

CSS 预处理语言less

我们可以使用css预处理语言去更加方便的写样式。

安装

npm i -D less

全局样式的引入

项目需要初始化一些样式，或者统一一些样式风格的话，可以全局引入样式。

1. 在assets下创建common.less
2. 在main.js中引入less即可全局生效

import { createApp } from 'vue'
import App from './App.vue'
import './assets/common.less'
createApp(App).mount('#app')

组件样式：

在组件的style里面可以写样式，控制的是本组件的样式。

在标签中添加scoped可以控制样式只对当前组件生效。

<style scoped>
.bgc{
  background: burlywood;
}
</style>

class的动态设置

clss写成对象形式：对象形式的class的key为clss名，value是布尔值，控制样式名是否生效。对象形式的class可以写多个。

   <div class="bgc" :class="{bgc1:isBgc,bgc2:isBgc2}"></div>

class还可以写成数组的形式，数组里面可以有多个对象，或者字符串，给元素添加多组样式。

   <div class="bgc" :class="[{bgc1:isBgc,bgc2:isBgc2},BGC3]">

动态设置style行内样式

写成对象的形式，key是属性名，value可以直接写值，也可以写变量等等

  <div :style="{background:contentBgc}">
      我是内容
    </div>
     // -----
    <script>
  export default{
    data(){
      return {
        title:'hello world',
        isBgc:true,
        isBgc2:true,
        BGC3:'BGC3',
        contentBgc:'#dd143c'
      }
    }
  }
</script>