Discussion on: Migrating from Create React App (CRA) to Vite

[mike]

Hi Darragh! How did you configure the CSS source mapping during your migration from CRA to Vite?

[Darragh O'Riordan]

hey! I use tailwind so the css/classes are all in the component's className attribute. Haven't needed a source map to trace them back to a separate file.

[mike]

I see. Do you know how to configure CSS source mapping? I can't find the configuration method in the documentation

[Darragh O'Riordan]

not 100% sure. are you using SASS, PostCSS or some other CSS processor? At first thought i would guess it's not a vite concern and should be configured in the preprocessor.

It looks like you can hook vite build into a preprocessor with something like

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `$injectedColor: orange;`
      }
    }
  }
})

[Darragh O'Riordan]

if you use postcss, vite automatically searches for the postcss.config.js or wherever you have your postcss config.

you can turn them on with map: { inline: true },

[mike]

I tried to configure the map of postCSS, but it didn't work. I wonder if there is something wrong with my configuration