zl程序教程

您现在的位置是:首页 >  后端

当前栏目

js 使用sass中的变量

JS变量 Sass 使用
2023-09-11 14:19:37 时间

 HBuilderX 2.9.8 相关联的版本

因为uniApp中不支持Sass 中的 exprot:

xxx.sass

$theme-text-color-colorful:#EE5002; //这是一个变量名
 
//主要的一步:
:export {
  theme_color: $theme-text-color-colorful;
}


xxx.js
import styles from 'scss文件路径名';

data(){
  return{
      textColor:styles.theme_color
  }
}

这样的方式再h5中可以使用,但是很可惜再小程序等地方不能使用,所以只能找其他办法了。

之前再弄前端的时候,记得是可以通过修改webpack的sass options来注入js的变量的

为什么要注入js的变量不是scss文件的变量,因为这样可以再js代码中复用

 

参考文章

原型是这样的

variables.js:

module.exports = {
  'primary-color': 'red',
  'space-v-lg': '1px'
}

仅需要在 webpack.config.js 中更改下配置:

 

未完...

 

 

 

转 : https://www.jianshu.com/p/148e3f06c344

https://blog.csdn.net/weixin_41615439/article/details/104421133

https://www.cnblogs.com/sws-kevin/p/15007850.html