3回答

街角咖啡

2022-11-17

我是这样解决的

问题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'

1

1

慕虎4102033

Thanks

2023-01-10

共1条回复

qq_慕雪3035454

2022-06-09

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

1

0

Sunday

2022-06-06

你好

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

0

0