第四十一章-Vite配置-css.preprocessorOptions

1.说明

原文：

类型： Record<string, object>

指定传递给 CSS 预处理器的选项。例如:

export default {
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `$injectedColor: orange;`
      }
    }
  }
}

2.安装less

众所周知Antd框架使用的是less。所以我们这里研究less的配置。

安装less：

yarn add less --dev

3.VbenAdmin的全局样式

在根目录下的：src\design文件夹中定义了VbenAdmin所有全局样式和全局less变量。其中分为两大类：

src\design\index.less：全局样式，在main.ts中使用。
src\design\config.less：全局变量，在vite.config.ts中使用。

至于该文件夹下的其他文件，都被直接或间接的引入到了index.less、config.less中。

我们这边直接拷贝文件夹就行了，样式也没啥研究的。如果有能力的可以把和index.less相关的文件都删除了，然后自己写关于VbenAdmin的样式。但是变量不能动，很多都antd的变量，antd 的 less 变量参考链接。
复制完之后，顺便将index.less在main.ts中引用一下。

4.Vite中的Less配置

4.1.代码配置

// ...

export default ({ command, mode }: ConfigEnv): UserConfig => {
  // ...
  return {
    // ...
    css: {
      preprocessorOptions: {
        less: {
          modifyVars: {
            // 用于全局导入，以避免需要单独导入每个样式文件。
            // reference:  避免重复引用
            hack: `true; @import (reference) "${resolve('src/design/config.less')}";`,
            // ↓这行代码下一章讲
            // ...generateModifyVars(),
          },
          javascriptEnabled: true,
        },
      },
    },
    // ...
  };
};

4.2.代码解析

less对应的对象可以查看lessjs-配置项。

javascriptEnabled: true这行代码没得说，毕竟antd的less文件中使用JS写法，比如：\node_modules\ant-design-vue\lib\style\color\bezierEasing.less
modifyVars是在全局less文件后面添加变量的配置。modifyVars对应的对象属性名会加上@追加到less文件后。
hack: true; @import (r...：这一行代码，在less文件中会被解析成：

@hack=true; @import (reference) "${resolve('src/design/config.less')}";

那这个hack变量是干什么的？我感觉啥也没有，单纯是为了将后面的@import接上的@import会报错，只写。这行代码可以随便写，比如：

// yiu: `red; @import (reference) "${resolve('src/design/config.less')}";`,
// ↓解析成,一样的效果。
@yiu=red; @import (reference) "${resolve('src/design/config.less')}";`,

我个人感觉这个hack和css hack单纯名字一样。至于reference，可以看一下关于Less js的@import实验这篇博文即可理解。只是我个人疑惑为什么这个import为什么不写在globalVars中。