在Vite项目中使用scss创建全局变量

合集 - Vite(3)

1.在Vite构建的项目中使用svg图标2023-10-15

2.在Vite项目中使用scss创建全局变量2023-10-15

3.vite中使用scss导出变量到js/ts中作为变量使用2023-10-25

收起

配置

这个也就是配置全局scss的过程，在vite.config.ts的defineConfig中添加属性，其中additionalData为scss中引入文件的书写方式：

  // scss全局变量的配置
  css: {
    preprocessorOptions: {
      scss: {
        javascriptEnabled: true,
        additionalData: '@import "./src/style/variable.scss";'
      }
    }
  }

整个vite.config.ts文件为：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// path报错安装 @types/node
import path from 'path'
// 引入svg需要用到的插件, 安装 yarn add vite-plugin-svg-icons
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    createSvgIconsPlugin({
      // 配置svg图标
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      symbolId: 'icon-[name]',
    }),
  ],
  resolve: {
    alias: {
      '@': path.resolve('./src'),
    },
  },
  // scss全局变量的配置
  css: {
    preprocessorOptions: {
      scss: {
        javascriptEnabled: true,
        additionalData: '@import "./src/style/variable.scss";'
      }
    }
  }
})