vue-cli4.x 使用 scss 全局变量设置使用

时间: 2020-08-27阅读: 172标签: 变量

本记录仅针对于 vue-cli4.x 使用 scss 全局变量设置使用

在网上也找了很多版本的方法,尝试后都不可行。由于我使用的是 vue-cli4.x 脚手架搭建的项目,在网上也找到一个解决方案,特此记录。


确定依赖包

先在 package.json 文件中确定是否集成了 sass 相关的包 node-sass 和 sass-loader. 若没集成,需要先进行相关安装。

npm install node-sass

npm install sass-loader


相关配置

在安装完相关依赖后,需要在 vue.config.js 中进行相关配置,重点配置路径。 路径后面的 ;是必须的

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                prependData: `@import "./src/assets/styles/base";`,
            },
        },
    },
}


使用

在需要使用全局样式的地方,就可以进行使用 base.scss 文件中定义的样式。但是得注意在 加 lang="scss"

logo.vue 文件中使用。

<style lang="scss" scoped>
.logo {
    float: left;
    height: $header-height;
}
</style>

原文地址:http://book.levy.net.cn/doc/frontend/vue/vue_scss_set.html


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9616

关闭

let与var的区别,为什么要用let?

var是全局声明,let是块级作用的,只适用于当前代码块;var变量会发生变量提升,let则不会进行变量提升;var 会造成重复赋值,循环里的赋值可能会造成变量泄露至全局

js 交换变量值的方法总汇

这篇文章总结七种办法来交换a和b的变量值 。最最最简单的办法就是使用一个临时变量了 ,最后我的方案是利用了ES6的解构赋值语法 ,它允许我们提取数组和对象的值,对变量进行赋值

Js变量提升与函数提升

函数写法:函数表达式、函数声明、Function构造函数(这种不推荐).其中函数表达式不会函数提升,函数声明会函数提升。引用类型传递的是指针,指针指向了变量存储地址.这例子里,2个b变量都指向了同一个地址,所以第一次输出5,然后下面修改了函数内部变量b的指向

js变量提升的坑

在js函数内部是可以直接修改全局的变量的,个人感觉是不好的设计, 但是确实存在这个概念,原理:先查看有没有函数变量bb,查看形参有没有bb

ES5中的静态私有变量

通过在私有作用域中定义私有变量或函数,同样也可以创建特权方法,基本模式如下:这个模式创建了一个私有作用域,并在其中封装了一个构造函数及相应的方法。在私有作用域中,首先定义了私有变量和私有函数

CSS变量使用解析

很早直接就了解到CSS变量相关的内容,奈何之前使用价值不高(很多主流浏览器不兼容),最近发现主流浏览器都已经支持了这一变化,CSS变量就像JS的变量,每个类名或者花括号就像一个function,里面的变量只有上下文以内可以获取,这就让CSS有了更多可能性。

js判断变量是否为整数

NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值,来指示其不是数字值。isNaN() 全局函数来判断一个值是否是 NaN 值。使用Math.round、Math.ceil、Math.floor判断整数取整后还是等于自己

深入研究Js全局变量

本文的内容比较硬核,我们一起来看下 JavaScript 全局变量的底层机制到底是怎样的。文章会涉及脚本作用域、全局对象等概念。变量的 词法作用域 (简称 作用域 )是程序中可以访问它的区域。

Js中变量声明效率问题

应该是JavaScript中访问变量中具体值时:【theVar1】的形式要比【theVar.theVar1】要快。也就是说,【多个具有联系的常量值独自定义成多个变量】的做法的效率要比【多个具有联系的常量值定义成一个变量的多个属性】来得高

理解Javascript的变量提升

在代码的编译期间,即代码真正执行的瞬息之间,引擎会将代码块中所有的变量声明和函数声明都记录下来。这些函数声明和变量声明都会被记录在一个名为词法环境的数据结构中。词法环境是Javascript引擎中一种记录变量和函数声明的数据结构

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!