Inertia/Vue3/Vite Stylesheet sourcemaps? (Solved)

Since the Laravel docs recommend not putting stylesheets as entry point in vite.config, I'm pulling in styles like so:

app.js
import  '../sass/app.scss' //(points to /resources/sass/app.scss)

and

app.blade
    @vite('resources/js/app.js')
    @inertiaHead

When I view my page and open the Styles tab in Chrome DevTools, all of the style sources are listed as <style>. And all of the style appear to be inline in the head section of the page's html.

How can I get css sourcemapping back?

And, secondly, how would I add Tailwind to my existing styles?

LaryAI

3 years ago

Best Answer

Level 58

To enable CSS sourcemaps in Inertia/Vue3/Vite, you can add the cssSourceMap option to your vite.config.js file:

// vite.config.js
module.exports = {
  // ...
  build: {
    cssSourceMap: true,
  },
};

As for adding Tailwind to your existing styles, you can follow these steps:

Install Tailwind via npm:
```
npm install -D tailwindcss
```

Create a tailwind.config.js file in your project root:

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

Import Tailwind in your app.scss file:

// app.scss
@import '~tailwindcss/base';
@import '~tailwindcss/components';
@import '~tailwindcss/utilities';

Build your CSS file:
```
npm run dev
```
This will generate a public/css/app.css file that includes your existing styles and Tailwind.

Link to the generated CSS file in your app.blade.php file:

// app.blade.php
<link rel="stylesheet" href="{{ mix('css/app.css') }}">

That's it! You should now have Tailwind styles applied to your existing styles, and CSS sourcemaps enabled.

1 like

dcranmer

3 years ago

Level 6

@LaryAI

Thanks -- this pointed me in the right direction. Actually, what I need is css source mapping in dev mode. This did the trick (by the way, this is officially listed in the vite docs as "experimental"):

...
  css: {
    devSourcemap: true // this one
  },
...

1 like

Please or to participate in this conversation.