vue3+vite 使用scss、sass 全局定义的变量以及使用

vue3项目全局定义变量以及文件内部使用全局定义的变量

- [安装最新版 sass](#安装最新版 sass)
- 修改vite.config.js
- [确保vite.config.js 中定义的_variables.scss文件位置准确](#确保vite.config.js 中定义的_variables.scss文件位置准确)
- 在文件中使用

安装最新版 sass

复制代码

npm install sass@latest --save-dev

修改vite.config.js

复制代码

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  plugins: [
    vue(),
  ],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/assets/_variables.scss" as *;`
      }
    }
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

确保vite.config.js 中定义的_variables.scss文件位置准确

复制代码

在 _variables.scss 文件中定义全局变量
$general: #4a90e2

在文件中使用

复制代码

.s-centage {
      color: $general;
       font-size: 36px;
       text-align: center;
     }