We recently started to update an old gulp based build process at work by using Laravel Mix. Mix is a wrapper around webpack which helps take a bunch of the setup headache away. If you have a very complex build, then Mix may not be for you, but for 90% of the needs of developers mix is going to serve you well.
I was able to get everything compiling easily, and then realized that I wasn’t being provided with sourcemaps for my css files. This means that I won’t be able to use a browser’s developer tools to see the source .scss file for a given css rule.
According to the mix documentation I should be able to take the code below and add a .sourceMaps(); parameter to it if I want sourcemaps to be generated.
mix.scss( 'source-file', 'destination-path');This code should generate sourcemaps.
mix.scss( 'source-file', 'destination-path').sourceMaps();Unfortunately, it doesn’t work. I was still left with my rendered css without sourcemap files generated alongside them. There is even an issue from 2017 highlighting the problem
Like many things as a developer, the solution was found by reading through a bunch of comments on the issue and forum posts. In the end the code below rendered my .css.map files as expected.
mix.webpackConfig({ devtool: "source-map" });
mix.scss( 'source-file', 'destination-path').sourceMaps();You need to both configure webpack to generate sourcemap files and tell mix to generate sourcemap files.
Yup this is contrary to the documentation, which makes no mention of the webpack configuration needed. One of my biggest frustrations as a developer is the lack of care put into documentation. Though the upside is that I can write about it and that generates business for me as people find solutions I write about and then hire me because they figure I can solve other problems they have.