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 lessless就没必要多说了把 正常使用即可
