4

I have an issue when trying yo setup css modules with react and snowpack. Here is how to reproduce the issue:

"snowpack": "^2.17.0",

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

Setup a new app using npx

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

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

Add sass file 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',

Run snowpack dev

npm start => snowpack dev

Error

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

enter image description here

Teddy Radenkov
  • 91
  • 4

1 Answers1

1

The solution is to rename app.sass to app.module.sass

Snowpack supports CSS Modules using the [name].module.css naming convention. CSS Modules work just like normal CSS imports, but with a special default styles export that maps your original classnames to unique identifiers.

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

Teddy Radenkov
  • 91
  • 4