1.使用公共的变量(:root)定义在root的变量可以进行类的使用

:root { 
    font-size: 160px;
    --main-bg-color:red
}
.red{
   color:var(--main-bg-color)
}

你看这个hello world变得多大多红

2.vite使用@postcss-plugins/console’

2-1安装：cnpm install @postcss-plugins/console
2-2新建一个postcss.config.js // js文件报错的话修改后缀为cjs
2-3 在post.config.js文件下导出
module.exports={
plugins:[require(‘@postcss-plugins/console’)]
}

//css文件进行使用(可以在main.js引入css或者在组件文件引入)
:root { 
    font-size: 160px;
    --main-bg-color:red
}
.red{
  @console.error  hello;
   color:var(--main-bg-color)
}

这样进行运行项目的时候 就会error出 hello

3.@import alias （引入css文件的时候 不在进行…/ 直接@引入)
在 vite.config.js文件下

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// 安装jsx:@vitejs/plugin-vue-jsx
import vueJsx from "@vitejs/plugin-vue-jsx";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx({}),
  ],
  //在这里resolve
  resolve:{
    alias:{
      '@styles':'/src/styles'
    }
  }
});

使用：

在 style.css下引入了other.css


然后在需要的文件下引入 style.css

运行效果：

4.css-modules

CSS模块化的一种解决方案（对css类名限定作用域的一种，只限定类选择器，对id、元素等选择器不管）
好处：
1、避免类名重复导致样式覆盖问题；
2、JS & CSS 共享变量
3、健壮可扩展

因为是vite内置的多以会自动识别的
新建文件

注意这个只是防止class类名重复 进行导致的覆盖 如果不同的类名下相同的属性 还是会覆盖的

5.css pre-processors （scss less 预处理器 css的解决方案）
安装

cnpm i less

less就没必要多说了把 正常使用即可