Menu
I have a Gatsby and Sanity site that's based on a starter project. Everything has worked great so far, but I updated all of my packages and plugins today in my package.json file to get rid of all npm warnings. This included updating to Gatsby 3.0.3 and PostCss 8 (I'm also now using the gatsby-plugin-postcss 4.0.0).
I managed to work through some initial errors, but now I'm having a problem where it's not recognizing my CSS Modules. I get errors for every component file:
Attempted import error: '[componentName].module.css' does not contain a default export (imported as 'styles')
and when I import the css file in the react components
import styles from './[componentName].module.css'
the styles object returns undefined. Do I need to downgrade to older versions of some of these packages?
Here is my package.json:
"dependencies": {
"@cloudflare/wrangler": "^1.15.0",
"@fontsource/montserrat": "^4.2.2",
"@fontsource/raleway": "^4.2.2",
"@sanity/block-content-to-react": "^2.0.7",
"@sanity/client": "^2.2.6",
"@sanity/image-url": "^0.140.22",
"date-fns": "^2.19.0",
"dotenv": "^8.2.0",
"gatsby": "^3.0.3",
"gatsby-plugin-anchor-links": "^1.2.1",
"gatsby-plugin-manifest": "^3.0.0",
"gatsby-plugin-react-helmet": "^4.0.0",
"gatsby-source-sanity": "^6.0.5",
"get-youtube-id": "^1.0.1",
"postcss-import": "^14.0.0",
"postcss-preset-env": "^6.7.0",
"react": "^17.0.1",
"react-autosize-textarea": "^7.1.0",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"react-hook-form": "^6.15.4",
"react-icons": "^4.2.0",
"react-script": "^2.0.5",
"react-youtube": "^7.13.1"
},
"devDependencies": {
"eslint": "^7.21.0",
"eslint-config-standard": "^16.0.2",
"eslint-config-standard-react": "^11.0.1",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.3.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-standard": "^4.1.0",
"gatsby-plugin-postcss": "^4.0.0",
"postcss": "^8.2.7",
"prettier-eslint-cli": "^5.0.1",
"prop-types": "^15.7.2"
}
863
Note: Gatsby is using css-loader@^5.0.0. Using CSS modules requires no additional configuration. Simply prepend .module to the extension. For example: app.css -> app.module.css . Any file with the module extension will use CSS modules.
Install the Gatsby plugin gatsby-plugin-postcss. Include the plugin in your gatsby-config.js file. Note: If you need to pass options to PostCSS use the plugins options; see postcss-loader for all available options. Write your stylesheets using PostCSS ( .css files) and require or import them as normal.
Write your stylesheets using PostCSS ( .css files) and require or import them as normal. To use CSS modules, prepend .module to the extension.
With the new PostCSS plugin API, you do not need to import postcss. You will get all classes and methods as a second argument to your Root function: That is also something that you can keep as-is for a while if you don’t feel like doing it immediately.
Since Gatsby v3 onwards you need to import the modules as ES modules:
import * from './[componentName].module.css'
In your case:
import * as styles from './[componentName].module.css'
Keep in mind that importing all styles at once won't allow webpack to treeshake your styles. The preferred way is to import modules separately like:
import { style1, style2 } from './mystyles.module.css
You can follow the stack trace of the discussion in this GitHub thread.
193
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
