scss :export 中导出的变量为空

scss :export 中导出的变量为空

最近在项目中发现，在其他项目中用的挺好的组件，在目前的项目中引用样式完全不对了，经过一番查找后发现是scss :export的变量为空，导致组件的样式不对劲。
下面介绍下scss :export配置方法， 及导致这个问题的原因。

一、scss :export 方法

1.在scss中配置要导出的变量

/* config.scss */

$brandPrimary: #E93030 ; //主题色/选中文字/强调文字(高亮色)/图标用色
:export {
  brandPrimary: $brandPrimary;
}

2.在vue文件导入变量并使用

import configScss from '@/style/config.scss';

export default {
    data() {
        return {
             styleObj: configScss , // 使用scss的:export的变量{brandPrimary:  #E93030}
        };
},

<style lang="scss" scoped>
/* 引入变量样式文件 */
@import "~@/styles/config.scss";
h1{
    color: $brandPrimary;
}
</style>

二、导致:export变量为{} 的原因及解决方法

理论上按照上述写法就行了，但是经测试style中进行@import样式是生效的$brandPrimary变量值也是正常传递，但是在js中styleObj.brandPrimary始终undefine。

1.导致问题原因

主要原因是mini-css-extract-plugin和vue-style-loader同时存在时候，会出现这个问题，

2.解决方法

引入mini-css-extract-plugin 时候，需要去掉vue-style-loader，目前没有发现去掉vue-style-loader 后有什么问题

还有个 按照名称为.module.scss的可以处理的，这个是vite 打包时候有效，使用webpack 不行,具体的可以参考vite的文档css-modules：https://vitejs.cn/guide/features.html#css-modules,
希望对你有所帮助