next.js icon indicating copy to clipboard operation
next.js copied to clipboard

prependData does import to other partials

Open PaulSinghDev opened this issue 1 year ago • 3 comments

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

  • [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

PaulSinghDev avatar Nov 23 '23 17:11 PaulSinghDev

Have you tried appending as * ?

E.g

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

EliHood avatar Nov 23 '23 20:11 EliHood

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

PaulSinghDev avatar Nov 24 '23 08:11 PaulSinghDev

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.

KenTay198 avatar Feb 01 '24 15:02 KenTay198

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

timneutkens avatar Feb 22 '24 13:02 timneutkens

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[bot] avatar Mar 08 '24 00:03 github-actions[bot]