js控制scss的变量_如何让scss变量能够当做js变量来使⽤如何让scss变量能够当做js变量来使⽤
当前我们使⽤scss变量有两个痛点：
需要⼿动导⼊
⽆法与js建⽴联系或者很难，后续不能在此基础上做⼀些骚操作
为了解决这两个问题，我们以创建js⽂件以json格式定义scss变量，然后通过配置webpack的解析规则来达到即能像普通scss⼀样使⽤，⼜能作为js变量使⽤的⽬的。
scss变量使⽤规范
变量创建
所有scss变量在style/variables.scss.js编写，格式要求为：
只允许使⽤⼩写字母
单词间以下划线"_"连接
命名应简洁易懂，以⼀个⼤的模块或⾼级别的单词开头_后⾯跟功能描述单词结尾
const variables = {
'header_height': '60px',
'header_background': `#ededed`
}
注意：命名以下划线连接是为了在js⽂件中能够单个import, 使⽤中已经在webpack进⾏转换，必须按照此格式！
在scss变量中使⽤是正常的scss变量：$header-height
在js中使⽤是定义时的变量格式：import { header_height } from "@/style/variables.scss.js";
变量使⽤
配置webpack中sass解析⽅式，⼀般来说项⽬构建者已经处理完毕，项⽬成员⽆需关⼼。
使⽤时⽆需引⼊，直接在样式⽂件中正常使⽤即可。
scss中使⽤⽰例
.the-nav{
height: $header-height;
}
js中使⽤⽰例
import { header_height } from "@/style/variables.scss.js";
...
data(){
return {
header_height: header_height
...
配置讲解
let scssVariables = require('./src/style/variables.scss.js');
css: {
loaderOptions: {
sass: {
prependData: Object.keys(scssVariables)
.map(k => `\$${k.replace('_', '-')}: ${scssVariables[k]};`)
.join('\n')
}
}
}
};
注意：此处有个坑，新版本的sass-loader更换了api参数prependData但是似乎没有⽂档说明⽼版本的fig.js 中 cuecli3+
let scssVariables = require('./src/style/variables.scss.js');
css: {
loaderOptions: {
sass: {
data: Object.keys(scssVariables)
.map(k => `\$${k.replace('_', '-')}: ${scssVariables[k]};`)
.join('\n')
}
}
}
};
⽼版本data => 新版本 prependData
let scssVariables = require('./src/style/variables.scss.js');
test: /\.scss$/,
use: [
'css-loader',
'postcss-loader',
{
loader: 'sass-loader',
options: {
data: Object.keys(scssVariables)
.map(k => `\$${k.replace('_', '-')}: ${scssVariables[k]};`) .join('\n')
}
}
]
}
...
经过⼀番姿势，到这⾥已经可以成功解锁新世界啦~~~~
css变量⽤优雅的姿势掉头发~ 哦不码代码~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。