如何在 SCSS 使用 JavaScript 变量/scss全局变量
Update2019/3/6:发现一个更好的方法,预处理器加载一个全局设置文件
官方github给出了详细的配置。
在 SCSS 中使用变量很方便,创建一个 variables.scss 文件,里面声明各种变量,如果你需要使用这些变量,就使用@import variables.scss
导入这个文件即可。但这样会存在两个小问题:
- 每次使用都要导入,不优雅
- JavaScript 文件无法使用这些变量
有没有两全其美并足够简单的方法呢?(:废话
假设有这样一个保存 scss 变量的文件,style/scss/variables.js:
module.exports = {
'red-color': 'red',
'px': `${1/20}rem`
}
仅需要在 webpack.config.js 中更改下配置:
let styleVariables = require('/style/scss/variables')
// 其他配置
...
{
test: /\.scss$/,
use: [
'css-loader',
'postcss-loader',
{
loader: 'sass-loader',
options: {
data: Object.keys(styleVariables)
.map(k => `\$${k}: ${styleVariables[k]};`)
.join('\n')
}
}
]
},
那么在任意 scss 中,都可以直接使用我们在 JavaScript 文件中声明的变量,而无需额外引入:
// page-a.scss
.page-a {
height: 20*$px;
color: $red-color;
}
如何在 SCSS 使用 JavaScript 变量/scss全局变量的更多相关文章
- javascript变量作用域 — 全局变量
javascript中,如果没有用var 声明一个变量,则该变量会被自动创建在全局作用域中,即使你是在某个函数中创建的,它也会成为全局变量,从而可以被另一个函数调用.
- 如何在VUE项目中使用SCSS
首先要了解什么是CSS 预处理器? SCSS是一种CSS预处理语言 定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性(完全兼容css3),让c ...
- css变量复用 全局变量-局部变量
前言 简单使用场景:同一套后台系统有多套主题的情况下,主题色作为一个最常用到的可复用的颜色,非常有必要像js的全局变量一样存在全局变量中以作复用,之前我第一个想到的是sass的变量声明,未曾想到css ...
- javascript变量的作用域
javascript变量的作用域 基本类型和引用类型 基本类型值指的是简单的数据段,而引用类型值指的是那个可能由多个值组成的对象 讲一个值赋值给变量时,javascript解析器首先要确定是基本类型 ...
- JavaScript 变量声明提前
<JavaScript权威指南>中指出:JavaScript变量在声明之前已经可用,JavaScript的这个特性被非正式的称为声明提前(hoisting),即JavaScript函数中声 ...
- JavaScript 变量
一,JavaScript 变量(存储信息的容器) 与代数一样,JavaScript 变量可用于存放值(比如 x=2)和表达式(比如 z=x+y). 变量可以使用短名称(比如 x 和 y),也可以使用描 ...
- javascript变量声明 及作用域
javascript变量声明提升(hoisting) http://openwares.net/js/javascript_declaration_hoisting.html 可能要FQ一下 java ...
- JavaScript局部变量和全局变量的理解
原文链接:http://www.cnblogs.com/eric-qin/p/4166552.html JavaScript局部变量和全局变量的理解 1 2 3 4 5 6 7 8 9 10 &l ...
- JavaScript 变量作用域
一. 变量声明 变量用var关键字来声明,如下所示: 变量在未声明的情况下被初始化,会被添加到全局环境. JavaScript执行代码时,会创建一个上下文执行环境,全局环境是最外围的环境.每个函数在被 ...
随机推荐
- 我尼玛,二半夜的说中photo.src病毒了。
大半夜手机预警,中病毒了,我感觉也没啥东西呀.一个破小网站,别人黑我干啥. 登上服务器去一看,我滴个乖乖,photo.src病毒.服务器里面显示是一个背景桌面应用程序, 打算直接从文件夹删除,但是正在 ...
- CDH hue下定时执行hive脚步
今天在看oozie时发现能在hue中执行hive 脚本,主要是hue 和 oozie结合使用,下面介绍下怎么使用的,挺恶心的,哈哈(在这里就不哔哔了) 提交oozie定时作业 1.进入hue界 ...
- 加NONCLUSTERED INDEX索引,在ON了之后还要INCLUDE
之前加了索引,但效果不大 SET STATISTICS TIME ON --执行时间 SET STATISTICS IO ON --IO读取 DBCC DROPCLEANBUFFERS --清除缓冲区 ...
- OOm是否可以try catch ?
只有在一种情况下,这样做是可行的: 在try语句中声明了很大的对象,导致OOM,并且可以确认OOM是由try语句中的对象声明导致的,那么在catch语句中,可以释放掉这些对象,解决OOM的问题,继续执 ...
- oracle 导入DMP文件时IMP-00013: 只有 DBA 才能导入由其他 DBA 导出的文件 IMP-00000: 未成功终止导入
参考: https://blog.csdn.net/breaker892902/article/details/11004495 给要导入的用户授权 插入成功
- 微信小程序之----制作视频弹幕
1. 文件目录 使用微信, 长度单位使用 rpx 可以避免不同设备的样式调试问题 经验总结,之前一直使用px ,发现换了测试机就崩了 2. index.wxml页面设置v ...
- stark组件开发之添加按钮显示和URL
添加: 需求: 根据用户的权限, 决定是否,有添加按钮. 通过配置进行定制,预留钩子进行权限的判断. class StartHandler(object): .................... ...
- 一、Windows许可证即将过期怎么办
当Win10系统提示“windows许可证即将过期”窗口时,直接点击“转到‘设置’”按钮,此时将显示“Windows激活”界面,从此界面中可以获取当前Win10版本信息. 由于Win10激活即将过期, ...
- 如何通过RNA-Seq了解转录本的结构
[转载]如何通过RNA-Seq了解转录本的结构 已有 1942 次阅读 2014-12-26 15:22 |个人分类:转录组测序|系统分类:科研笔记|关键词:RNA-Seq,转录组测序,转录本结构| ...
- django by example 第四章 dashboard处html无法渲染问题
描述: 实现django by example 代码时,第四章 dashboard处html无法渲染问题. 此时报错,NoReverseMatch at /account/login/, Error ...