您现在的位置是：首页 >技术交流 >SCSS全局变量的配置（vue3+vite）网站首页技术交流

首先在src文件夹下新建一个var.scss文件，放置scss变量。

$fontSizeTable: '0.6rem';
$borderRadius: '0.8rem';
$fontSize: '0.9rem';
$lineHeight: '1.5rem';

直接引入该文件到app.vue或者main.js是不生效的，我们需要将其引入到每一个组件的scss中去，手动引入也可以实现。
这里我们采用vue相关的配置自动引入。
在根文件夹下寻找vite.config.ts，如果找不到则新建一个，如果已有可以跳过这一步。

一 新建vite.config.ts

1.1 新建vite.config.ts文件

在根文件夹下新建vite.config.ts文件，在文件中输入以下代码。

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default () => {
    return defineConfig({
        plugins: [
          vue(),
        ],
    })
}

1.2 引入@vitejs/plugin-vue

这里的@vitejs/plugin-vue需要使用npm引入，如果不添加这个插件则导致vue文件无法解析。

npm i @vitejs/plugin-vue

二 相关报错

2.1 模块"vite"没有导出的成员"defineConfig"

vite版本过低导致的，升级vite版本。

npm install vite@3.2.3

2.2 vite.createFilter is not a function

vite和vitejs/plugin-vue版本不兼容引起了，升级vitejs/plugin-vue版本。

npm i @vitejs/plugin-vue@3.2.0

三 配置scss全局变量

在vite.config.ts文件中，将文章开始创建的var.scss文件配置到对应位置即可。

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default () => {
    return defineConfig({
        plugins: [
          vue(),
        ],
        css: {
            preprocessorOptions: {
              scss: {
                additionalData: '@import "./src/var.scss";' // 加载全局样式，使用scss特性
              }
            },
        }
    })
}