vite-css配置

默认支持css，不需要配置，推荐使用原生的 css variables

• 因为集成了 postcss的功能，通过postcss进行编译 css

• 支持 css variables

• 支持 postcss
  • postcss.config.js
• @import alias 别名

原生的 css variables

css variables是 css3原生的语法，浏览器支持的语法
MDN css variables

:root {
    --main-bg-color: #f90;
}
.root {
    color: rgba(0,0,0,.6);
  background-color: var(--main-bg-color);
}

postcss

根目录新建，postcss.confnig.js
index.css使用

.root {
    @console.error hello root;
  background-color: var(--main-bg-color);
}
// 编译时输出
[postcss-console] hello root

@import alias

vite.config.js

export default defineConfig({
  plugins: [react()],
  server: {
    host: '0.0.0.0'
  },
  // 路径别名 alias
  resolve: {
    alias: aliasPath.resolve.alias
  },
})

styles/index.css

@import url('@styles/common.css');
:root {
    --main-bg-color: #f90;
}

css-modules

直接给样式名添加 *.module.css，会自动识别为 css modules
index.module.css

import styled from './index.module.css'
// className={styled.title}

css pre-processors

css预处理，就是 less，sass，stylue

less

只需要安装 less
vite less支持热更新

yarn add less