在vue-cli 3中，共享的全局变量被传递给手写笔和sass样式

在开发中，我们有时会定义大量的基本样式变量，例如：

这些变量被大量vue单文件组件使用，每个组件都吸引人一次，太麻烦了。全局导入是一个很好的方法，所以把variable.styl文件引入到main.js中，但是你会发现它不起作用。

查阅了vue cli的官方文档，发现有官方支持的方法。

1.将共享全局变量传递给sass样式

有时，您希望将选项传递给webpack的预处理器加载器。您可以在vue.config.js中使用css.loaderOptions选项。例如，您可以像这样将共享的全局变量传递给所有Sass样式：

//vue . config . js module . exports={ CSS : { loader options 3360 }//将sass:传递给sass-loader {//@/是src//的别名，因此这里假设您有src/variables . scss ' The file data : ` @ import '[email protected]/variables . scss '；`}} }}2.将共享的全局变量传递给手写笔样式

//vue.config.js文件module . exports={ CSS : { loader options 3360 }//将选项styls : { import 3360 '[email protected]/common/styl/color . styl ' } } }传递给styls-loader

以上是边肖在vue-cli 3中向手写笔和sass引入的共享全局变量。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！