How to setup sass modules in packages/ui?

[miguelvictor]

I'm planning to use turborepo to manage the codebase of the two web apps that will be deployed in different domains. I'm using turborepo because i want to share the UI components/logic between the two web apps.

[mfpopa]

This is not related to monorepos, but I will attempt to help you anyways.

I use packages in my apps without a build step. I installed Vite and sass in my apps as dev dependencies. I used Vite because it supports Sass and CSS modules out of the box. Now any packages I use in my apps know how to process imports of *.module.scss files without any problems. This actually enables Sass modules for both my apps and packages used by my apps.

If you use a build step (compile package source code so that changes can be visible inside apps) for your ui package, then you can use whatever dev server and bundler (Vite, webpack, etc) you generally use in a codebase. For example, you can install Vite and sass as dev dependencies inside packages/ui/package.json and then run npm i in the root of the monorepo to install them, then do npx vite build inside the packages/ui folder to bundle the ui package into dist folder to be consumed by your apps.

[AlexandraKlein]

I did something very similar, but am running into this error on turbo run dev/build:

 ✘ [ERROR] No loader is configured for ".scss" files: src/Button/button.module.scss

[ImJakeDev]

I am also curious about this.

[tanaytoshniwal]

I'm also trying to achieve the same thing, trying to use CSS modules in packages/ui which is a react library, but getting this error during the build process:
CSS Modules cannot be imported from within node_modules.
any suggestions here?

[AlexandraKlein]

I ended up ditching tsup as my bundler and configuring rollup to handle my SCSS Modules.
CSS Support is still experimental in tsup.

I first installed the following packages:

postcss rollup rollup-plugin-peer-deps-external rollup-plugin-postcss rollup-plugin-typescript2 @rollup/plugin-commonjs @rollup/plugin-node-resolve

Inside my ui-core package.json:

"scripts": {
    "build": "rollup -c --bundleConfigAsCjs",
    "dev": "rollup -c -w --bundleConfigAsCjs",
}

Inside my ui-core rollup.config.js:

import peerDepsExternal from "rollup-plugin-peer-deps-external";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "rollup-plugin-typescript2";
import postcss from "rollup-plugin-postcss";

const packageJson = require("./package.json");

export default {
  input: "src/index.ts",
  output: [
    {
      file: packageJson.main,
      format: "cjs",
      sourcemap: true,
    },
    {
      file: packageJson.module,
      format: "esm",
      sourcemap: true,
    },
  ],
  plugins: [
    peerDepsExternal(),
    resolve(),
    commonjs(),
    typescript({ useTsconfigDeclarationDir: true }),
    postcss(),
  ],
 external: ['react', 'react-dom'],
};

EDIT/ADDITION:

Alternatively, it looks like you could also accomplish this with Vite with something like this, which is already bundling Storybook:

Inside my ui-core package.json:

"scripts": {
  "dev": "npx vite",
  "build": "npx vite build"
}

Inside my ui-core vite.config.js:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig((configEnv) => ({
  plugins: [react()],
  build: {
    rollupOptions: {
      // https://rollupjs.org/guide/en/#big-list-of-options
      input: "src/index.ts",
      output: [
        {
          format: "cjs",
          entryFileNames: "index.js",
        },
        {
          format: "esm",
          entryFileNames: "index.mjs",
        },
      ],
    },
  },
}));

[atulmy]

Hey, can you point me to any sample repository for using scss with rollup or provide a code sample?

[AlexandraKlein]

The repo is private but I'll post my edits in my comment shortly.

[atulmy]

Thanks for posting the snippets, quite useful. I used https://github.com/alexeagleson/template-react-component-library (minus the storybook part) for building the structure. Looks like this:

[MasherJames]

1. You can create a tsup.config.ts file in your root folder. This config file allows you to pass custom esbuild plugins and options. Visit this part of the docs for more info.

2. Then make use of the custom plugin esbuild-sass-plugin. This plugin has good support with zero issues since they are attended to quickly. Though, it has some Breaking Changes which you should also check out before making your decision.

3. Lastly, in your tsup.config.ts file;

import { defineConfig } from 'tsup';
import { sassPlugin } from 'esbuild-sass-plugin';

export default defineConfig({
    esbuildPlugins: [sassPlugin()],
});