There are no CSS maps after yarn build

[aitor]

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!

[strarsis]

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?

[aitor]

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.

[strarsis]

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

mix.sourceMaps() does not work

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

[aitor]

wow! a bug from 2018?
reading workarounds

[aitor]

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')],
  });