scss中的变量报错

Question

Answer 1

街角咖啡 2022-11-17 23:43:32

我是这样解决的

问题1：在开发过程中出现了无法找到scss中的变量的问题，解决办法是通过配置vue.config.js中 additionalData 属性，来提前加载变量，这样其它css中就能正常使用变量了
css: {
    loaderOptions: {
      scss: {
        additionalData:
          '@import "@/style/variables.scss"; @import "@/style/mixin.scss";'
      }
    }
  }
  问题2：在js中需要调用scss中定义的变量，从而实现方便的改变风格的功能，但现在直接用课程中的方法无法正常实现，因为variable.scss已经通过配置vue.config.js被加载，在页面中不能再次单独引用。解决的办法是把 scss中变量导出的部分代码单独新建一个文件 var-js.module.scss，然后再在需要用到的js里面进行引入就可以了
  var-js.module.scss 文件
  :export {
          menuText: $menuText;
              menuActiveText: $menuActiveText;
          subMenuActiveText: $subMenuActiveText;
          menuBg: $menuBg;
          menuHover: $menuHover;
          subMenuBg: $subMenuBg;
          subMenuHover: $subMenuHover;
          sideBarWidth: $sideBarWidth;
    }
    引入
    import variable from '@/style/var-js.module.scss'

• 慕虎4102033 #1

  Thanks

Answer 2

qq_慕雪3035454 2022-06-09 15:42:25

遇到同样的问题，请问你解决了吗

Answer 3

Sunday 2022-06-06 15:17:25

你好

从错误中来看，应该是没有定义这个变量。