scss声明全局变量

在SCSS中声明全局变量是为了让它们可以在项目中的任何地方被访问和使用。通常的做法是在单独的文件中定义这些全局变量，然后通过@import规则将其导入到需要使用这些变量的地方。
以下是一个简单的步骤：
1.创建一个全局变量文件： 例如，创建一个名为 _variables.scss 的文件，并在这个文件中定义你的全局变量。

// _variables.scss
$primary-color: #1a1b20;
$secondary-color: #ffcc00;
$font-size-base: 16px;

2.导入全局变量文件： 在项目的主入口样式文件（比如 main.scss 或者根据Vite或VueCLI配置的入口文件）中，通过 @import 导入这个全局变量文件。

// main.scss
@import 'variables'; // 注意这里不需要带下划线和扩展名

body {
  background-color: $primary-color;
  // ...
}

如果您的目录结构是相对路径，确保正确指定了从当前文件到 _variables.scss 的相对路径。

3.在Vite或Webpack配置中处理导入： 对于Vite项目，如果使用的是Sass预处理器，确保在vite.config.js中配置了正确的loader以处理.scss文件并能正确识别全局变量的导入：

// vite.config.js
module.exports = {
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "./styles/_variables.scss";' // 假设_variables.scss位于styles目录下
      }
    }
  },
  // ...其他配置项
};

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

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

这样一来，你在整个项目中定义的任何SCSS文件只要包含了对主入口文件的引用，就可以直接使用这些全局变量。