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

stalker
  • 56

问题描述

在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>

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

回复
阅读 3.2k
5 个回答
✓ 已被采纳

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

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

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

import全局sass变量文件

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

阿通
  • 2
新手上路,请多包涵
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏