#scss not resolved in build but working locally

3 messages · Page 1 of 1 (latest)

south acornBOT
#

Hi @gaunt dome. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the information provided, it seems like there might be an issue with the way your SCSS file is being imported or resolved. Here are a few things you could try:

  1. Check the file path: Ensure that the path to your SCSS file is correct. The error message suggests that the file socialMedia.module.scss cannot be resolved from socialMedia.jsx. Make sure that the SCSS file is in the same directory as your JSX file, or adjust the path accordingly if it's in a different location.

  2. Use ESM import: According to the Astro documentation (https://docs.astro.build/en/guides/upgrade-to/v1/), it's recommended to use ESM import for CSS files that live inside of the src/ directory. This allows Astro to automatically build and optimize these files. Here's an example of how to do this:

    import './style.scss';
    

    Note that when a CSS file is imported using this method, any @import statements are also resolved and inlined into the imported CSS file.

  3. Check your Astro configuration: If you're importing a CSS file from an npm package and the package does not suggest using a file extension, you'll need to update your Astro config. Add the package name to the vite.ssr.noExternal array in your astro.config.mjs file. Here's an example of how to do this:

    import { defineConfig } from 'astro/config';
    export default defineConfig({ vite: { ssr: { noExternal: ['package-name'], } }})
    

    Replace 'package-name' with the name of the package you're importing from.

#

If none of these suggestions work, it might be a bug with Astro. There are known issues with Astro not bundling imports properly during the build step, as mentioned in this GitHub issue (https://github.com/withastro/astro/issues/6827). If you believe this is the case, consider reporting the issue on the Astro GitHub page.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: