如何在vue模板的scoped style中使用全局sass变量？

Question

问题描述

在webpack配置文件里加入了对scss/sass文件的处理器 并引入了全局sass变量 但是在vue模板里使用变量提示变量不存在

问题出现的环境背景及自己尝试过哪些方法

开发环境为Win10x64 webpack3.5 vue2.5.3 npm5.6 并安装了vue-style-loader css-loader sass-loader node-sass等相关插件

相关代码

webpack配置文件：

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

vue模板文件：

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

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

它是一个独立的文件，它肯定是不知道你那个变量是哪儿来的呀

Answer 2

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

</style>
    可以写两个style标签，一个有scoped   一个没有。

Answer 3

import全局sass变量文件

Answer 4

<style lang="scss" scoped></style>写错了吧,应该是sass吧

Answer 5

不知道这个行不行Vue Loader