Css 预处理器

2023年12月18日

柏拉文

越努力，越幸运

一、认识

---

CSS 预处理器: 主流的包括Sass/Scss、Less和Stylus。这些方案各自定义了一套语法，让 CSS 也能使用嵌套规则，甚至能像编程语言一样定义变量、写条件判断和循环语句，大大增强了样式语言的灵活性，解决原生 CSS 的开发体验问题。

二、配置

---

Vite 本身对 CSS 各种预处理器语言(Sass/Scss、Less和Stylus)做了内置支持。也就是说，即使你不经过任何的配置也可以直接使用各种 CSS 预处理器。

2.1 scss 自动注入

我们封装一个全局的主题色，新建src/variable.scss文件，

$theme: red

每次要使用 $theme 属性的时候我们都需要手动引入 variable.scss 文件，那有没有自动引入的方案呢？配置如下:

import Path from "path";
import react from '@vitejs/plugin-react-swc'
import { defineConfig, normalizePath } from 'vite'

const variablePath = normalizePath(Path.resolve(__dirname, './src/variable.scss'));

export default defineConfig({
  css: {
    preprocessorOptions:{
      scss: {
        additionalData: `@import "${variablePath}";`
      }
    }
  },
  plugins: [react()],
})

使用如下:

p{
    color: $theme;
}