next.js
next.js copied to clipboard
prependData does import to other partials
Link to the code that reproduces this issue
https://github.com/PaulSinghDev/prepend-data-nextjs-issue
To Reproduce
- Setup the prependData flow using
sassOptions
- Create a styles folder
- Add a partial for something like
_colors.scss
- Create a component
- Add an SCSS module and another partial
- Try to use your color variable in the second partial
-
@use
the new partial in the main SCSS module for the component - Import the SCSS module to component
- Use the component in your app
Current vs. Expected behavior
Expected: The app will compile and the SCSS will render as normal with the color variable added in
Actual: Get an undefined variable error
Verify canary release
- [X] I verified that the issue exists in the latest Next.js canary release
Provide environment information
OSX: macOS 13.6.1 (22G313)
VSCode: Version: 1.84.2 (Universal)
NextJS: 14.0.3
SASS: 1.69.5
Which area(s) are affected? (Select all that apply)
Not sure
Additional context
No response
Have you tried appending as *
?
E.g
@use "./some-partial" as *;
@EliHood yeah it still has the same error/behaviour. I feel like this is something to do with the _some-partial.scss
file being ignored by the prependData
rule.
Currently on Next 14.1.0. I faced the same issue, seems to be related to the --turbo flag on the next dev. When I remove it, my variables.scss file is correctly set so it might just be that prependData isn't working with turbo dev for the moment.
Had a look at this but it seems there's a misconception about what prependData
would do, the underlying option that handles this is only prepending what you provided to the entrypoint, in this case the entrypoint would be SomeComponent.module.scss
, everything imported from there would not magically get the additionalData prepended. Here's a sandbox that shows what it would look like manually adding the prependData: https://codesandbox.io/p/github/PaulSinghDev/prepend-data-nextjs-issue/csb-3nz6nh/draft/immutable-snowflake?file=%2Fsrc%2Fcomponents%2FSomeComponent%2FSomeComponent.module.scss%3A7%2C1
More info here: https://webpack.js.org/loaders/sass-loader/#additionaldata
@KenTay198 your case is different, I just opened a PR for the issue you ran into: #62397
This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.