主要介绍了详解vue项目中如何引入全局sass/less变量、function、mixin，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

sass或者less都提供变量设置，在需求切换主题的项目中使用less或者sass变量，这篇文章主要介绍了vue引入sass全局变量，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

sass或者less都提供变量设置，在需求切换主题的项目中使用less或者sass变量，只要修改变量值，编译后所有用到该变量的样式都会被修改为你想要的效果，但是在vue-cli搭建的项目中，在main.js中全局引入一个scss文件，在其中定义变量在其他组件或者页面中引用报变量未定义错误，其他的样式可以正常显示，显然是编译的问题。 傻瓜式引用 在每个用到全局变量的组件都引入该全局样式文件 import 'path/fileName.scss' 但是组件或者页面不在统一层目录下，引入的路径可能

让我们考虑下场景:当使用rem/vw开发移动端的时候，你定义了一个px转rem的函数,或者是网站配色的全局变量等，然后到工程里为每个vue文件或者组件import ‘publicfilename.scss’,那得重复做这样的工作很多很多…次，万一这些公用文件目录路径变怎么办呢，哭都来不及，想想都觉得恐怖呀！ 接下来拯救我们的神器就要登场了—sass-resources-loader,它可以省去重复性的引入，还支持less,postcss等，具体用法如下： npm install -d sass