turbo [Turbopack] Does not support sass/scss

What version of Turbopack are you using?

1.6.0

What package manager are you using / does the bug impact?

Yarn v1

What operating system are you using?

Mac

Describe the Bug

So it seems turbo cant compile sass/scss. The normal compiler works fine. This was using the simple starter example from next but with sass 1.55.0

Stacktrace

>>> TURBOPACK (alpha)

Thank you for trying Next.js v13 with Turbopack! As a reminder,
Turbopack is currently in alpha and not yet ready for production.
We appreciate your ongoing support as we work to make it ready
for everyone.

Learn more about Next.js v13 and Turbopack: https://nextjs.link/with-turbopack
Please direct feedback to: https://nextjs.link/turbopack-feedback

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - initial compilation 2.131ms
error - [rendering] [root of the dev server]/
  Error during SSR Rendering
  ReferenceError: styles is not defined
    at Home (.next/server/pages/chunks/pages_index.tsx.js:7:20)
    at renderWithHooks (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
    at renderElement (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
    at renderElement (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderElement (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5971:9)
    at renderNodeDestructiveImpl (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderContextProvider (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5920:3)
    at renderElement (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6017:11)
    at renderNodeDestructiveImpl (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderContextProvider (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5920:3)
    at renderElement (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6017:11)
    at renderNodeDestructiveImpl (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
    at renderElement (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderContextProvider (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5920:3)
    at renderElement (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6017:11)
    at renderNodeDestructiveImpl (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderContextProvider (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5920:3)
    at renderElement (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6017:11)
    at renderNodeDestructiveImpl (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderContextProvider (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5920:3)
    at renderElement (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6017:11)
    at renderNodeDestructiveImpl (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderContextProvider (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5920:3)
    at renderElement (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6017:11)
    at renderNodeDestructiveImpl (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
    at renderElement (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderElement (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5971:9)
    at renderNodeDestructiveImpl (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
    at renderElement (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderHostElement (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5642:3)
    at renderElement (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5952:5)
    at renderNodeDestructiveImpl (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
    at renderElement (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at retryTask (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6528:5)
    at performWork (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6576:7)
    at <unknown> (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6902:12)
    at scheduleWork (node_modules/react-dom/cjs/react-dom-server.browser.development.js:77:3)
    at startWork (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6901:3)
    at <unknown> (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6996:5)
    at <anonymous>
    at Object.renderToReadableStream (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6949:10)
    at Object.renderToInitialStream (node_modules/next/dist/server/node-web-streams-helper.js:124:27)
    at renderShell (node_modules/next/dist/server/render.js:765:57)
    at Object.renderPage (node_modules/next/dist/server/render.js:681:28)
    at Object.defaultGetInitialProps (node_modules/next/dist/server/render.js:360:67)
    at Document.getInitialProps (node_modules/next/dist/pages/_document.js:19:20)
    at Object.<anonymous> (node_modules/next/dist/shared/lib/utils.js:84:33)
    at <anonymous>
    at asyncGeneratorStep (node_modules/@swc/helpers/lib/_async_to_generator.js:23:28)
    at _next (node_modules/@swc/helpers/lib/_async_to_generator.js:12:17)
    at <unknown> (node_modules/@swc/helpers/lib/_async_to_generator.js:17:13)
    at <anonymous>
    at Object.<anonymous> (node_modules/@swc/helpers/lib/_async_to_generator.js:9:16)
    at Object.loadGetInitialProps (node_modules/next/dist/shared/lib/utils.js:62:33)
    at loadDocumentInitialProps (node_modules/next/dist/server/render.js:703:48)
    at renderDocument (node_modules/next/dist/server/render.js:790:49)
    at Object.renderToHTML (node_modules/next/dist/server/render.js:828:34)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async runOperation (.next/server/pages/chunks/_f03781.js:148:4)
    at async (.next/server/pages/chunks/_f03781.js:49:17)
  

event - updated in 640ms
event - updated in 256ms

Expected Behavior

It should compile

To Reproduce

Start an example project. Add sass to it. Change css files to scss. Run turbo. It should fail

Reproduction Repo

No response

Oct 27 '22 15:10 Thrun12

having the same issue when importing .scss files.

the dev server does not show any error but the styles are missing completely

Oct 27 '22 16:10 everdrone

Also checked it happens for both .sass and .scss extensions

Oct 27 '22 16:10 Thrun12

Can confirm. Similar to @everdrone , no errors for me either but the styles are missing.

  "dependencies": {
    "next": "13.0.0",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@types/node": "18.11.7",
    "@types/react": "18.0.24",
    "@types/react-dom": "18.0.8",
    "eslint": "8.26.0",
    "eslint-config-next": "13.0.0",
    "sass": "^1.55.0",
    "typescript": "4.8.4"
  }

Edit: From the docs, SCSS is currently not supported.

SCSS and LESS

.scss and .less files let you utilize SCSS and LESS - languages which enhance CSS in various ways. These languages don't currently work out-of-the-box with Turbopack.

These are likely to be available via plugins in the future.

https://turbo.build/pack/docs/features/css

Oct 29 '22 05:10 omar-zahid

Same here, wanna try the new turbo pack but it doen't work with sass

Oct 30 '22 21:10 slogivew

Same here too


Turbopack failed to compile
error - [rendering] [root of the dev server]/  Error during SSR Rendering
  ReferenceError: styles is not defined
    at Home (.next/server/pages/chunks/pages_index.tsx.js:7:20)
    at renderWithHooks (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)

Oct 31 '22 02:10 shiqimei

Also having the same set of issues. Using a global styles.scss works fine when importing via _app.tsx however using modules is where I run into issues

Nov 04 '22 09:11 uixmat

Same issue here, the styles from scss modules are imported but are being override when I check the page that uses the component

Mar 23 '23 20:03 gcostaapps

simple usage of .scss and module.scss files now seems to work with nextjs and turbo, however, as soon as you @import or @extend etc in a module.scss file, turbo fails. It cannot resolve the referenced file.

Jul 20 '23 09:07 LucaNerlich

I saw "basic sass support" was implemented in https://github.com/vercel/turbo/pull/4985 🙏 Perhaps this issue can now be updated or closed, @padmaia?

as soon as you https://github.com/import or https://github.com/extend etc in a module.scss file, turbo fails. It cannot resolve the referenced file

In case this affects you @LucaNerlich: I had to update my @import statements to get them to resolve, as below. (I don't know whether these changes are intended behaviour or incomplete implementation).

Replace using the apparently now-deprecated ~ prefix to indicate node_modules, instead using relative paths from my package root:

E.g. from within my monorepo ~/packages/web/styles/global.scss - replace with ../../node_modules/ to go up 2 levels from ~/packages/web/ to the monorepo root before descending into node_modules:

-@import "~bootstrap/scss/functions";
+@import "../../node_modules/bootstrap/scss/functions";

Update my relative imports to resolve from my package root, rather than the path to the current scss file containing the @import:

E.g. to import packages/web/styles/imported-file.scss in packages/web/styles/global.scss:

-@import "./imported-file";
+@import "styles/imported-file";

Jul 20 '23 10:07 andyjy

thanks @andyjy Ill give that a try. I need to import scss variables and functions from my own scss files, not from node_modules, shouldn't be a (big) difference though.

Jul 20 '23 10:07 LucaNerlich

@LucaNerlich updated my comment above to demonstrate how I got my relative imports working also.

Jul 20 '23 10:07 andyjy

Just a note, if you import a .scss file from in a package that you don't control which imports via ~ (in my case a third party package uses and chokes on @import"~normalize.css/normalize.css") then the noted fix can't really work.

Oct 31 '23 19:10 CaptainN

Just a note, if you import a .scss file from in a package that you don't control which imports via ~ (in my case a third party package uses and chokes on @import"~normalize.css/normalize.css") then the noted fix can't really work.

You may have already figured this - and it's not exactly pretty - but it is possible to either:

a) use patch-package or similar to apply the fix above to third-party packages b) or, potentially - if your third party package happens to be designed around one short-ish main file just containing a list of internal and external @imports, then you might consider replicating a copy that main file within your own codebase with the fixes applied (subject to having to check for updates when upgrading the third party package - like I said, not exactly pretty but would get the job done).

Oct 31 '23 19:10 andyjy

Dart Sass supports Protobuf RPC.

Feb 12 '24 15:02 tats-u

Would love an update on this one, as we need to import scss files from node_modules pretty frequently and this is an unfortunate hoop we have to jump through in order to offer Turbopack support

Feb 14 '24 21:02 jmikrut

The remaining issues are tracked over here https://github.com/vercel/next.js/issues/60088

Feb 15 '24 00:02 ForsakenHarmony

turbo turbo copied to clipboard

[Turbopack] Does not support sass/scss

What version of Turbopack are you using?

What package manager are you using / does the bug impact?

What operating system are you using?

Describe the Bug

Expected Behavior

To Reproduce

Reproduction Repo

SCSS and LESS

turbo
turbo copied to clipboard