scss声明全局变量

1.创建全局变量存放文件

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

2.配置scss全局变量(vue3+vite)

// vite.config.ts
export default defineConfig({
 // plugins配置，简写了
  plugins：[...], 
  // resolve配置项简写了
  resolve:{...} 
  // scss 全局变量配置
  css: {
    preprocessorOptions: {
      scss: {
        javascriptEnabled:true,
        additionalData: '@import "./src/styles/variable.scss";' // 加载全局样式，使用scss特性，variable.scss是放全局变量的文件，一般建在styles下面
      }
    },
  },
  // ...其它配置项与
})

3.对于Vue CLI项目，若要全局引入变量，在vue.config.js中配置相应的sass-loader选项：(vue2)

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: '@import "@/styles/variables.scss";' // 假设variables.scss位于src/styles目录下
      }
    }
  }
};