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?


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

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e9ebfc-19ff.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e9ebfc-19ff.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?