How do I use the global sass variable in the scoped style of the vue template?

problem description

add a processor to the scss/sass file in the webpack configuration file and introduce the global sass variable, but use the variable in the vue template to indicate that the variable does not exist

the environmental background of the problems and what methods you have tried

the development environment is Win10x64 webpack3.5 vue2.5.3 npm5.6 and related plug-ins such as vue-style-loader css-loader sass-loader node-sass are installed

related codes

webpack configuration file:

      {
        test: /\.s[ac]ss$/,
        use: [
          "vue-style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              data: `$color: red;`
            }
          }
        ]
      },

vue template file:

<style lang="scss" scoped>
.red {
    color: $color;
}
</style>

what result do you expect? What is the error message actually seen?

Es6 sass-loader sass webpack vue.js

Sep.10,2021

it is a separate file. It must not know where your variable came from

    <style lang="scss">
    .red {
       color: $color;
    }
</style>
<style lang="scss" scoped>

</style>
    stylescoped

import global sass variable file

< style lang= "scss" scoped > < / style > is it wrong? It should be sass

I wonder if this line is possible ide/pre-processors.html-sharp%E5%85%B1%E4%BA%AB%E5%85%A8%E5%B1%80%E5%8F%98%E9%87%8F" rel=" nofollow noreferrer "> Vue Loader

Previous: What does dva-loading do in front-end testing?

Next: How to get any number in [0,1] through Math.random?