Ошибка выполнения при попытке использовать модули css с реакцией и снежным покровом

Question

У меня проблема при попытке настроить модули 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',

Запустите 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 поддерживает модули CSS с помощью [name].module.cssсоглашение об именовании. Модули CSS работают так же, как обычный импорт CSS, но со специальным экспортом стилей по умолчанию, который сопоставляет исходные имена классов с уникальными идентификаторами.

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