Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

prependData does import to other partials #58837

Closed
1 task done
PaulSinghDev opened this issue Nov 23, 2023 · 5 comments
Closed
1 task done

prependData does import to other partials #58837

PaulSinghDev opened this issue Nov 23, 2023 · 5 comments
Labels
bug Issue was opened via the bug report template. locked

Comments

@PaulSinghDev
Copy link

Link to the code that reproduces this issue

https://github.com/PaulSinghDev/prepend-data-nextjs-issue

To Reproduce

  1. Setup the prependData flow using sassOptions
  2. Create a styles folder
  3. Add a partial for something like _colors.scss
  4. Create a component
  5. Add an SCSS module and another partial
  6. Try to use your color variable in the second partial
  7. @use the new partial in the main SCSS module for the component
  8. Import the SCSS module to component
  9. 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

  • 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

@PaulSinghDev PaulSinghDev added the bug Issue was opened via the bug report template. label Nov 23, 2023
@EliHood
Copy link

EliHood commented Nov 23, 2023

Have you tried appending as * ?

E.g

@use "./some-partial" as *;

@PaulSinghDev
Copy link
Author

@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.

@KenTay198
Copy link

KenTay198 commented Feb 1, 2024

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.

@timneutkens
Copy link
Member

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

Copy link
Contributor

github-actions bot commented Mar 8, 2024

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.

@github-actions github-actions bot added the locked label Mar 8, 2024
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 8, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Issue was opened via the bug report template. locked
Projects
None yet
Development

No branches or pull requests

4 participants