在vue-cli 3中给stylus、sass样式传入共享的全局变量

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了在vue-cli 3中给stylus、sass样式传入共享的全局变量，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1121字，纯文字阅读大概需要2分钟。

内容图文

在vue-cli 3中， 给stylus、sass样式传入共享的全局变量

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

大量的vue单文件组件会用到这些变量，每个组件都引人一次又太麻烦。全局引入是个不错的方法，于是，在main.js 中引入variable.styl文件，但是你会发现，并不起作用。

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

1、给sass样式传入共享的全局变量

有的时候你想要向 webpack 的预处理器 loader 传递选项。你可以使用 vue.config.js 中的  css.loaderOptions 选项。比如你可以这样向所有 Sass 样式传入共享的全局变量：

// vue.config.js
module.exports = {
 css: {
  loaderOptions: {
   // 给 sass-loader 传递选项
   sass: {
    // @/ 是 src/ 的别名
    // 所以这里假设你有 `src/variables.scss` 这个文件
    data: `@import "~@/variables.scss";`
   }
  }
 }
}

2、给stylus样式传入共享的全局变量

// vue.config.js 文件
module.exports = {
 css: {
  loaderOptions: {
   // 给 stylus-loader 传递选项
   stylus: {
    import: '~@/common/stylus/color.styl'
   }
  }
 }
}

总结

以上所述是小编给大家介绍的在vue-cli 3中给stylus、sass样式传入共享的全局变量,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

内容总结

以上是互联网集市为您收集整理的在vue-cli 3中给stylus、sass样式传入共享的全局变量全部内容，希望文章能够帮你解决在vue-cli 3中给stylus、sass样式传入共享的全局变量所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---