scss :export 中导出的变量为空

### 示例

##### 定义主题变量：`src/assets/styles/themes/dark.scss`

```scss
@import "./lib.scss";
// menu colors
$menuBgColor: #141414;
$activeTextColor: #409eff;
$textColor: #f5f5f5;

:export {
  menuColor: $menuBgColor;
  menuTextColor: $textColor;
  menuActiveTextColor: $activeTextColor;
}

@include theme("dark");
```

##### 引入`src/assets/styles/themes/index.js`

```js
import dark from './dark.scss'
export default {
  dark
}
```

##### 引入主题css主题 `src/layouts/store/index.js`

```js
import themeVariables from '@/assets/styles/themes/index.js'
console.log('themeVariables', themeVariables)
```

以上控制台输出的为空对象。

- 解决办法：
  把dark.scss重命名为：dark.module.scss，并重新引入该文件，即可解决。
- 为什么 `.module.scss` 能解决问题
  - **SCSS 文件支持 CSS Modules** ：在 `vue-cli` 环境中，`.module.scss` 文件名会自动启用 CSS Modules。这使得 SCSS 文件的 `:export` 语法能够正确地将变量导出并在 JavaScript 中使用。
  - **配置简化** ：通过使用 `.module.scss` 文件后缀，不需要额外的配置来启用 CSS Modules。Vue 的构建工具自动识别这种文件后缀并应用相应的处理。
  - **模块化导出** ：使用 CSS Modules，SCSS 文件中的 `:export` 语法可以被正确解析并导出对象，这样在 JavaScript 中可以直接使用这些样式变量。

最后修改：2024 年 07 月 16 日

感谢赏赐的coffee~

scss :export 中导出的变量为空

发表评论取消回复
来了不说两句？

GitKraken破解及汉化教程，支持最新版本。

PHP -- Easyswoole验证器Validat自定义错误信息

海南记忆

红色-电钢琴-二手-转卖

golang-nsq高性能消息队列

JS常用函数合集

TP6 model where is null 查询写法

【Go Time】Go语言 make 与new 的区别

红色-电钢琴-二手-转卖

【Go Time】Go语言里的条件语句else、switch

scss :export 中导出的变量为空

发表评论 取消回复 来了不说两句？

scss :export 中导出的变量为空

发表评论取消回复
来了不说两句？