#scss not resolved in build but working locally
3 messages · Page 1 of 1 (latest)
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:
-
Check the file path: Ensure that the path to your SCSS file is correct. The error message suggests that the file
socialMedia.module.scsscannot be resolved fromsocialMedia.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. -
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
@importstatements are also resolved and inlined into the imported CSS file. -
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.noExternalarray in yourastro.config.mjsfile. 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.