SCSS无法导出(:export)

报错

学习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
image

注意

我使用:export时报错,但项目启动不报错,而且也确实能导出。
百度一下,问题是webstrom版本低,2020版之前有此问题。
image


__EOF__

本文作者之士咖啡
本文链接https://www.cnblogs.com/zz-1q/p/17480275.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
posted @   之士咖啡  阅读(1036)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)
点击右上角即可分享
微信分享提示