CSS sourcemaps with Sage 11 always point to app.css

sage
1

When running dev, inspecting a CSS rule has always pointed to the exact CSS file and line number.

However, with Sage, it always returns app.css when other css files are imported.

css: {
      devSourcemap: true,
    },

I have this placed after the plugins array in Vite config. Should it be somewhere else?

1 Like
2

Hey dude - not sure why that didnt work for you . I tried a hundred different approaches , variants of build: { sourcemap: mode === ‘development’, cssSourceMap: true, }….and none worked however, your solution actually did My build looks like thisI changed the npm comand also to “dev”: “vite --mode=development”, just to be sure as other people had reported it needed to be explicit, but you can just sub out the mode test for “true” if you want

export default defineConfig(({ command, mode, isSsrBuild, isPreview }) => {console.log('mode is', command, mode);return {
  base: '/app/themes/fluxio-theme/public/build/',
  css: {
    devSourcemap: mode === 'development'
  },
  plugins: [
    //tailwindcss(),
    laravel({
      input: [
        'resources/css/main_init.scss',
        'resources/css/main.scss',
        'resources/js/app.js',
        'resources/css/editor.css',
        'resources/js/editor.js',
      ],
      refresh: true,
    }),

    purge({
      safelist: purgeWhitelist,
    }),

    wordpressPlugin(),

    // Generate the theme.json file in the public/build/assets directory
    // based on the Tailwind config and the theme.json file from base theme folder
    wordpressThemeJson({
      disableTailwindColors: false,
      disableTailwindFonts: false,
      disableTailwindFontSizes: false,
    }),
  ],
  resolve: {
    alias: {
      '@scripts': '/resources/js',
      '@styles': '/resources/css',
      '@fonts': '/resources/fonts',
      '@images': '/resources/images',
    },
  },
}})
1 Like
3

It seemed to be an issue an issue with the Vite version I was using.

Works as well:

css: {
      devSourcemap: true,
    }