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

Posted 2023-02-16

【中文标题】尝试将 css 模块与 react 和 snowpack 一起使用时出现运行时错误

【英文标题】：Runtime error when trying to use css modules with react and snowpack

【发布时间】：2021-02-28 05:31:45

【问题描述】：

我在尝试使用 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/>

雪包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'

【参考方案1】：

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

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

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