Roots Discourse

There are no CSS maps after yarn build

After yarn build:production it works as expected.

After yarn build and yarn start there is no souce maps at public/styles

webpack.mix.js has the souceMaps function at the end of the file:

mix
  .sourceMaps()
  .version();

What else do I have to look at? Thanks!

It can well be that the sourcemap is writting inline into the output CSS file.
Does it work in the browser developer tools? Does it show the original source (SCSS) files and line numbers when inspecting styles?

1 Like

It doesn’t work and it doesn’t show the source files when inspect files. All styles are shown as it belongs to app.css?id=randomhash.

Also, Chrome has enabled CSS source maps.

Hm, this appears to be a bug with laravel-mix or of the webpack dependencies:

Does some of these workaround help (especially those at the end)?

Also this thread:
https://laracasts.com/discuss/channels/elixir/laravel-mix-sourcemap-files-not-genarates

1 Like

wow! a bug from 2018?
reading workarounds

Solved adding this to css block:

 // webpack.mix.js
.webpackConfig({
  devtool: 'source-map'
})

So, the entire block is:

mix
  .sass('resources/styles/app.scss', 'styles')
  .sass('resources/styles/editor.scss', 'styles')
  .webpackConfig({
    devtool: 'source-map'
  })
  .options({
    processCssUrls: false,
    postCss:[require('tailwindcss')],
  });
2 Likes