尝试将css模块与react和snowpack一起使用时出现运行时错误

Question

我有一个问题，当尝试使用react和snowpack设置css模块时。以下是如何重现该问题的方法：

"snowpack": "^2.17.0",

"@snowpack/plugin-sass": "^1.1.1",

使用npx设置新应用程序

npx create-snowpack-app snowpack --template @snowpack/app-template-react-typescript

npm install @snowpack/plugin-sass --save-dev

添加sass文件app.sass

.test
  width: 30px
  height: 30px
  background: red

App.tsx

import styles from './app.sass'

<div className={styles.test}/>

Snowpack devOptions

port: 8005,
open: 'none',
bundle: false,
out: 'dist'

Snowpack plugins

'@snowpack/plugin-react-refresh',
'@snowpack/plugin-dotenv',
'@snowpack/plugin-typescript',
'@snowpack/plugin-webpack',
'@snowpack/plugin-sass',

运行snowpack dev

npm start => snowpack dev

错误

SyntaxError: The requested module './app.css.proxy.js' does not provide an export named 'default'

​

​

Answer 1

解决方案是将app.sass重命名为app.module.sass

Snowpack支持使用[name].module.css命名约定的CSS模块。CSS模块的工作原理就像普通的CSS导入一样，但是有一个特殊的默认样式导出，可以将您的原始类名映射到唯一标识符。

https://www.snowpack.dev/#import-css-modules