#Sass variables auto import in next14

1 messages · Page 1 of 1 (latest)

limber sun
#

I would like to import automatically my variables.scss files in all scss files of my app like before. In next14 it doesn't seem to work the same way like :
sassOptions: {
includePaths: [path.join(__dirname, "src/styles")],
additionalData: @import "variables.scss";,
},

random roseBOT
#

Hi @limber sun. 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 in the extracts, it seems there is an open issue related to the prependData flow using sassOptions in Next.js 14.0.3. The issue describes a problem with importing variables from a partial Sass file, which seems similar to your case. Unfortunately, the extracts do not provide a solution to this issue.

Here is the link to the issue for reference: Github Issue (https://github.com/vercel/next.js/issues/58837)

For now, you might want to consider manually importing your variables.scss file in each of your component's SCSS files as a workaround.

If you're still having trouble, I recommend checking the Next.js documentation or their GitHub issues for updates or potential solutions.

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

#

@limber sun kapa.ai is still learning and improving, please let us know how it did by reacting below

limber sun
#

@random rose I noticed that it was the --turbo flag that makes next ignore prependData. So I removed the --turbo dev for the moment

random roseBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Based on the information from the extracts, it seems that there are indeed issues reported with the --turbo flag in Next.js. Some users have reported that removing the --turbo flag resolved their issues.

Here are some of the issues reported:

  1. Turbopack with Next config option "compiler - emotion or styledComponents" do not work (https://github.com/vercel/next.js/issues/48341)
  2. Router evaluation failed: received error from javascript stream (https://github.com/vercel/next.js/issues/50075)
  3. Using --turbo Flag With npm run dev Seems To Throw "Encountered two children with the same key, 0" Error (https://github.com/vercel/next.js/issues/57743)
  4. --turbo flag not work with pageExtensions (https://github.com/vercel/next.js/issues/57603)
  5. [turborepo] [turbopack] Running a NextJs app by using the --turbo flag in the TurboRepo monorepo, causes Error: Next.js package not found (https://github.com/vercel/next.js/issues/56887)
  6. TypeError: Cannot read properties of undefined (reading 'current') when adding --turbo (https://github.com/vercel/next.js/issues/57936)
  7. [NextJS 14] Cannot use experimental.typedRoutes with --turbo (https://github.com/vercel/next.js/issues/57790)

If you're experiencing issues with the --turbo flag, it might be a good idea to remove it for the time being, as you've done, until the issues are resolved.

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