记录一个简单的全局引入scss（函数、变量、混合器）文件的问题

当我们直接在入口文件中引入资源文件发现，在其他scss文件中无法直接使用，还需要单独去引入一次；

为什么需要这样配置而不能在入口文件中直接引入呢？

这是因为 SCSS 的变量、函数或者混合器等内容是在编译阶段被解析的，而不是在运行时。因此，如果你想要在样式文件中使用这些内容，就需要在编译阶段将这些内容注入到每个样式文件中。

而在入口文件中引入 SCSS 文件只是将这些样式文件导入到项目中，而并不会在编译阶段将 SCSS 文件中的内容注入到每个样式文件中。

因此，如果你想要在每个样式文件中直接使用 SCSS 文件中定义的变量、函数或者混合器，就需要通过 Vite 配置项 或者webpack配置项来实现。

vite

css: {
      //全局配置utils.scss
      preprocessorOptions: {
        scss: {
          additionalData: `@import "@/assets/style/centn/modules/util.scss";`,
        },
      },
    }

webpack

{
      test: /\.(css|scss|sass)$/,
      use: [
        !prodMode
          ? 'style-loader'
          : {
              loader: MiniCssExtractPlugin.loader,
              options: {
                publicPath: '../'
              }
            },
        'css-loader',
        'postcss-loader',
        'sass-loader',
        {
          loader: 'sass-resources-loader',
          options: {
            resources: [
              'src/style/var.scss' 
            ]
          }
        }
      ]
    }

或者像vue-cli中

css: {
      loaderOptions: {
        scss: {
            prependData: `@import "@/style/var.scss";`
        },
      }
    }

这意味着，你在 此配置项中引入的 SCSS 文件中定义的变量、函数或者混合器等内容都可以在项目中的任何样式文件中直接使用，而无需在每个样式文件中单独引入。