css - 尝试将 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

应用程序.tsx

import styles from './app.sass'

<div className={styles.test}/>

雪堆devOptions

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

雪堆plugins

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

运行雪包开发

npm start => snowpack dev

错误

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

score 0 · Accepted Answer

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

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

1 回答 1