SCSS无法导出(:export)
报错
学习scss
时,想用scss
文件管理一片区域的颜色,需要在<script>
中引入scss文件
。
但在实际使用时,并没有导出属性。
-- sidebar.scss 文件内容
$menuBg:#304156;
:export {
menuBg: $menuBg;
}
Console显示
处理
在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
时报错,但项目启动不报错,而且也确实能导出。
百度一下,问题是webstrom
版本低,2020版之前有此问题。