transpile Package SCSS/CSS Modules

[lewisvoncken]

Describe the feature you'd like to request

to transpile scss modules in a monorepo you still have to use https://www.npmjs.com/package/next-transpile-modules

But the documentation indicates that the package is replaced

Describe the solution you'd like

Add support for scss transpile to the transpilePackage functionality https://beta.nextjs.org/docs/api-reference/next.config.js#transpilepackages

Describe alternatives you've considered

update the docs that you still need next-transpile-modules for scss files

To use the appDir function it is required to remove next-transpile-modules

This results in this error

../../packages/ui/components/authSidebar/authSidebar.module.scss
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .root {
|     --placeholder-style: 1;
| }

[lewisvoncken]

as soon as you move the ui also to the transpilePackages option then scss modules are not allowed

../../packages/ui/components/authSidebar/authSidebar.module.scss
CSS Modules cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-modules-npm
Location: ../../packages/ui/components/authSidebar/authSidebar.js

[korsvanloon]

I tried both with css and scss and I can confirm both are not working for me either.

experimental: {
    appDir: true,
    transpilePackages: ['@acme/ui'],
  },

packages/ui/build/Carousel.js

...
import styles from './Carousel.module.css';
...

error - ../../packages/ui/build/Carousel.module.css
Module parse failed: Unexpected token (8:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| /*  GLOW */
| /*  RADIUS */
> .embla {
|   position: relative;
| }

[lewisvoncken]

@balazsorban44 Do you have any tips in how I could solve this issue?

[TommySorensen]

I have the same issue. What is best practice here? Should the UI package from the monorepo export a build/dev step like NextJs suggested here https://nextjs.org/docs/messages/css-modules-npm ? Then how will the PostCSS compile the css files?

[taylorfsteele]

+1 on this. Feel free to check this stackblitz for a repro example: https://stackblitz.com/edit/node-rqan3w

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.