• vite 原生支持 css 语法
• 推荐使用原生 css variable

postcss

如果项目包含有效的 PostCSS 配置 (任何受 postcss-load-config 支持的格式，例如 postcss.config.js)，它将会自动应用于所有已导入的 CSS。

yarn add @postcss-plugins/console -D

• 在根目录配置 postcss.config.js

  yarn add @postcss-plugins/console -D

• css中添加如下代码

  .root {
  @console.error hello roots
  color: var(--main-bg-color);
  }

• 运行项目查看结果

@import alias

css 导入支持别名的方式

• 在 vite.config.js 中配置别名

  resolve: {
    alias: {
      "@": "/src",
      "@styles": "/src/styles",
    },
  },

• css 中使用 @import

  @import url("@styles/other.css");

  css-modules

  任何以 .module.css 为后缀名的 CSS 文件都被认为是一个 CSS modules 文件

• 创建 test.module.css 文件

  .moduleClass {
  color: yellow;
  }

• 在 App.jsx 使用 ```javascript import classes from “@/styles/test.module.css”

export default defineComponent({ setup(){ return () =>{ return

<a name="w9lKU"></a>
# css pre-processors
Vite 也同时提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持
- 安装
```javascript
# .scss and .sass
yarn add -D sass

• 创建 test.scss ```css $bgColor: blue;

.root { background-color: $bgColor; }

.bg { height: 200px; width: 200px; background: url(“@/assets/logo.png”); }

- 使用
```javascript
import '@/styles/test.scss'