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全局变量的更多相关文章

  1. javascript变量作用域 — 全局变量

    javascript中,如果没有用var 声明一个变量,则该变量会被自动创建在全局作用域中,即使你是在某个函数中创建的,它也会成为全局变量,从而可以被另一个函数调用.

  2. 如何在VUE项目中使用SCSS

    首先要了解什么是CSS 预处理器? SCSS是一种CSS预处理语言 定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性(完全兼容css3),让c ...

  3. css变量复用 全局变量-局部变量

    前言 简单使用场景:同一套后台系统有多套主题的情况下,主题色作为一个最常用到的可复用的颜色,非常有必要像js的全局变量一样存在全局变量中以作复用,之前我第一个想到的是sass的变量声明,未曾想到css ...

  4. javascript变量的作用域

    javascript变量的作用域 基本类型和引用类型 基本类型值指的是简单的数据段,而引用类型值指的是那个可能由多个值组成的对象  讲一个值赋值给变量时,javascript解析器首先要确定是基本类型 ...

  5. JavaScript 变量声明提前

    <JavaScript权威指南>中指出:JavaScript变量在声明之前已经可用,JavaScript的这个特性被非正式的称为声明提前(hoisting),即JavaScript函数中声 ...

  6. JavaScript 变量

    一,JavaScript 变量(存储信息的容器) 与代数一样,JavaScript 变量可用于存放值(比如 x=2)和表达式(比如 z=x+y). 变量可以使用短名称(比如 x 和 y),也可以使用描 ...

  7. javascript变量声明 及作用域

    javascript变量声明提升(hoisting) http://openwares.net/js/javascript_declaration_hoisting.html 可能要FQ一下 java ...

  8. JavaScript局部变量和全局变量的理解

    原文链接:http://www.cnblogs.com/eric-qin/p/4166552.html JavaScript局部变量和全局变量的理解   1 2 3 4 5 6 7 8 9 10 &l ...

  9. JavaScript 变量作用域

    一. 变量声明 变量用var关键字来声明,如下所示: 变量在未声明的情况下被初始化,会被添加到全局环境. JavaScript执行代码时,会创建一个上下文执行环境,全局环境是最外围的环境.每个函数在被 ...

随机推荐

  1. 我尼玛,二半夜的说中photo.src病毒了。

    大半夜手机预警,中病毒了,我感觉也没啥东西呀.一个破小网站,别人黑我干啥. 登上服务器去一看,我滴个乖乖,photo.src病毒.服务器里面显示是一个背景桌面应用程序, 打算直接从文件夹删除,但是正在 ...

  2. CDH hue下定时执行hive脚步

        今天在看oozie时发现能在hue中执行hive 脚本,主要是hue 和 oozie结合使用,下面介绍下怎么使用的,挺恶心的,哈哈(在这里就不哔哔了) 提交oozie定时作业 1.进入hue界 ...

  3. 加NONCLUSTERED INDEX索引,在ON了之后还要INCLUDE

    之前加了索引,但效果不大 SET STATISTICS TIME ON --执行时间 SET STATISTICS IO ON --IO读取 DBCC DROPCLEANBUFFERS --清除缓冲区 ...

  4. OOm是否可以try catch ?

    只有在一种情况下,这样做是可行的: 在try语句中声明了很大的对象,导致OOM,并且可以确认OOM是由try语句中的对象声明导致的,那么在catch语句中,可以释放掉这些对象,解决OOM的问题,继续执 ...

  5. oracle 导入DMP文件时IMP-00013: 只有 DBA 才能导入由其他 DBA 导出的文件 IMP-00000: 未成功终止导入

    参考: https://blog.csdn.net/breaker892902/article/details/11004495 给要导入的用户授权 插入成功

  6. 微信小程序之----制作视频弹幕

    1. 文件目录     使用微信, 长度单位使用 rpx 可以避免不同设备的样式调试问题     经验总结,之前一直使用px ,发现换了测试机就崩了        2. index.wxml页面设置v ...

  7. stark组件开发之添加按钮显示和URL

    添加: 需求: 根据用户的权限, 决定是否,有添加按钮.  通过配置进行定制,预留钩子进行权限的判断. class StartHandler(object): .................... ...

  8. 一、Windows许可证即将过期怎么办

    当Win10系统提示“windows许可证即将过期”窗口时,直接点击“转到‘设置’”按钮,此时将显示“Windows激活”界面,从此界面中可以获取当前Win10版本信息. 由于Win10激活即将过期, ...

  9. 如何通过RNA-Seq了解转录本的结构

    [转载]如何通过RNA-Seq了解转录本的结构 已有 1942 次阅读 2014-12-26 15:22 |个人分类:转录组测序|系统分类:科研笔记|关键词:RNA-Seq,转录组测序,转录本结构|  ...

  10. django by example 第四章 dashboard处html无法渲染问题

    描述: 实现django by example 代码时,第四章 dashboard处html无法渲染问题. 此时报错,NoReverseMatch at /account/login/, Error ...