526互联

SCSS无法导出（:export）

发布时间 2023-06-14 15:14:27作者: 之士咖啡

报错

学习scss时，想用scss文件管理一片区域的颜色，需要在<script>中引入scss文件。
但在实际使用时，并没有导出属性。

-- sidebar.scss 文件内容

$menuBg:#304156;
:export {
  menuBg: $menuBg;
}

Console显示
image

处理

在vue项目中，可以通过style module以开箱即用的方式在*.vue 文件中使用 CSS 模块。
但是想在JavaScript中作为CSS模块导入CSS文件或其它预处理文件，该文件应该以 .module.(css|less|sass|scss|styl) 结尾，因为以.module.scss为后缀名的CSS文件都被认为是一个CSS模块文件 （scss会翻译成css）。导入这样的文件会返回一个相应的模块对象；

问题解决
在scss文件名后缀前添加“.module”。sidebar.scss => sidebar.module.scss

注意

我使用：export时报错，但项目启动不报错，而且也确实能导出。
image