如何让scss变量能够当做js变量来使用

最新推荐文章于 2024-07-26 15:29:05 发布

春深是蔚蓝

最新推荐文章于 2024-07-26 15:29:05 发布

阅读量5.4k

点赞数

分类专栏： scss 文章标签： webpack sass vue.js

本文链接：https://blog.csdn.net/qq_15390381/article/details/104049801

版权

解决scss变量使用痛点，通过创建js文件定义scss变量并配置webpack解析规则，实现既能像普通scss变量使用，也能作为js变量。介绍scss变量命名规范，scss与js中的使用方式，并提供vue.config.js和webpack.config.js的配置示例。

摘要由CSDN通过智能技术生成

如何让scss变量能够当做js变量来使用

当前我们使用scss变量有两个痛点：

需要手动导入
无法与js建立联系或者很难，后续不能在此基础上做一些骚操作
为了解决这两个问题，我们以创建js文件以json格式定义scss变量，然后通过配置webpack的解析规则来达到即能像普通scss一样使用，又能作为js变量使用的目的。

scss变量使用规范

变量创建

所有scss变量在style/variables.scss.js编写，格式要求为：

只允许使用小写字母
单词间以下划线"_"连接
命名应简洁易懂，以一个大的模块或高级别的单词开头_后面跟功能描述单词结尾

const variables = {
  'header_height': '60px',
  'header_background': `#ededed`
}

module.exports = variables;

注意：命名以下划线连接是为了在js文件中能够单个import, 使用中已经在webpack进行转换，必须按照此格式！
在scss变量中使用是正常的scss变量：$header-height
在js中使用是定义时的变量格式：import { header_height } from "@/style/variables.scss.js";