DEV Community

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

Collapse
 
darraghor profile image
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.

Collapse
 
huangjingyang profile image
mike

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

Thread Thread
 
darraghor profile image
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;`
      }
    }
  }
})
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
darraghor profile image
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 },

Thread Thread
 
huangjingyang profile image
mike

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