Js中使用项目中的公共SCSS样式变量

100 阅读1分钟

Js中使用项目中的公共SCSS样式变量

在项目中我们通常将许多公共的样式变量提出放在一个公共的样式文件中,方便日后统一维护。最常见的就是一些常用的色值和公共组件的宽高,然后再将这个公共文件引入到需要使用这些变量的样式文件中,直接只用变量的名字即可使用;但是也有我们在逻辑中需要使用的情况,比如图表设置色值。
首先在scss文件中将要使用的变量导出如下:
:export {
  primaryC:$--color-primary;
  successC: $--color-success;
  warningC: $--color-warning;
  errorC: $--color-error;
  infoC: $--color-info;
  primaryText: $text-color-primary;
  disabledText: $text-color-disabled;
  regularText: $text-color-regular;
}
随后在js中引入,即可直接使用
import variables from '@/styles/variables.module.scss';
console.log('variables', variables);
打印结果如下:

image.png