在vue-cli3中如何给stylus、sass样式传入共享的全局变量-创新互联

这篇文章主要为大家展示了“在vue-cli 3中如何给stylus、sass样式传入共享的全局变量”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“在vue-cli 3中如何给stylus、sass样式传入共享的全局变量”这篇文章吧。

专业从事企业网站建设和网站设计服务，包括网站建设、域名注册、虚拟空间、企业邮箱、微信公众号开发、微信支付宝重庆小程序开发公司、成都app开发、软件开发、等服务。公司始终通过不懈的努力和以更高的目标来要求自己,在不断完善自身管理模式和提高技术研发能力的同时，大力倡导推行新经济品牌战略，促进互联网事业的发展。

在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-cli3中如何给stylus、sass样式传入共享的全局变量-创新互联
文章分享：https://www.cdcxhl.com/article38/epppp.html

成都网站建设公司_创新互联，为您提供微信公众号、用户体验、网站制作、品牌网站设计、网站维护、静态网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联