大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

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

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

从策划到设计制作,每一步都追求做到细腻,制作可持续发展的企业网站。为客户提供成都网站建设、做网站、网站策划、网页设计、主机域名、网页空间、网络营销、VI设计、 网站改版、漏洞修补等服务。为客户提供更好的一站式互联网解决方案,以客户的口碑塑造优易品牌,携手广大客户,共同发展进步。

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

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

在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样式传入共享的全局变量
文章链接:http://dzwzjz.com/article/gcsjpo.html
在线咨询
服务热线
服务热线:028-86922220
TOP