龙空技术网

Vue: 如何引用全局 Sass

HelloWeb3 464

前言:

而今小伙伴们对“sass怎么用”大致比较重视,同学们都想要学习一些“sass怎么用”的相关内容。那么小编在网络上收集了一些有关“sass怎么用””的相关文章,希望看官们能喜欢,兄弟们一起来学习一下吧!

在 Vue 里写样式,基本上都 Sass 起步。Sass 变量有很多好处,其中之一就是定义变量,在写类似 danger, warning, info, primary 样式的时候就不用每次都对颜色背景硬编码了,而是直接用先前定义好的 Sass 变量。写 UI 组件的时候,如何全局Sass, 方法大概有三种,下面就简单总结一下。

每个文件引入

假如现在我们已经将变量都定义在 global.scss 文件上了,如果要在某个 .vue 文件里使用变量就要先将其引入。

<template>...</template><script>...</script><style lang="scss">@import ("你的路径/global.scss");.button {   background: $--primary-bg;}</style>

但是这种方法不长久,如果我们每个组件都要引入,那不是每个 .vue 都要 @import 一次?有点太麻烦了。

App.vue

如果你写的是一个网站,那么肯定会用到 App.vue 这个文件。所以你可以在 App 这个组件里 @import。注意:不要在 App 组件里写 scoped ,这样引入的样式都会应用到每个组件上。

<template>...</template><script>...</script><style lang="scss">@import "你的路径/global.scss";...</style>

如果App.vue 里有别的代码,那你可以将 App 独立出来,如将 App 包裹你的项目代码,这相当于 HomePage 才是你真正的 App。

App   HomePage
loader引入

sass-resources-loader 可以将你的 .scss 文件作为全局引入,但是这个是要与 webpack 结合的。vue-cli3或者vue-cli4 也是通过修改vue.config.js 来实现。

标签: #sass怎么用 #sass变量作用域 #sass如何使用全局变量