Laravel-mix: not generate css sourcemap when compile sass with mix.sourceMaps()

[green-mike]

Version

Laravel Mix Version: 0.12.1
Node Version: v6.6.0
NPM Version: 4.1.2
YARN Version: 0.22.0
OS: MacOS Sierra

Description:

not generate css sourcemap when compile sass with mix.sourceMaps() . But it generate css sourcemap correct when not call mix.sourceMaps(). Hoverer, it generate js sourcemap when call mix.sourceMaps() and it does not generate sourcemap when not call mix.sourceMaps().

Steps To Reproduce:

laravel new project
yarn install dependence

default:

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

run npm run dev
app.js(no sourcemap)
app.css(sourcemap)

But

add sourceMaps()

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css').sourceMaps();

run npm run dev
app.js(sourcemap)
app.css(no sourcemap)

[stephan-v]

Sourcemapping seems to be broken for me as well. Normally I would get some kind of inline sourcemap string within the CSS file. This no longer seems to happen.

[sebdesign]

Same here, I can no longer get source maps for (inline or not) when compiling Sass.

[kulek1]

I have exactly the same issue as you @green-mike and I found a temporary solution:
Add these lines to webpack.mix.js
mix.webpackConfig({ devtool: "inline-source-map" });

[petergaal91]

Thanks @kulek1, it's working!

Maybe something broken with the 'cheap-module-eval-source-map' devtool value in webpack 3?

[jsindos]

Changing from .sourceMaps(); to .webpackConfig({ devtool: "inline-source-map" }); changes my error outputs from:

to

The second is an improvement, but should it have the __WEBPACK_IMPORTED_MODULE_0_react__default.a.findDOMNode or is that unavoidable?

[janschloss]

@kulek1 your answer worked for me, thanks!

[adampatterson]

@JeffreyWay Both #932 and #879 were closed as duplicates of each other.

I was curious if there was a resolution. Source maps were working as .map files.

if (!mix.inProduction()) {
    mix.webpackConfig({devtool: 'inline-source-map'})
}

Fixed the issue for me at this time but I wanted to know if I need to update, change, or fix something.

Laravel Mix Version: ^1.0
Node Version: v8.6.0
NPM Version: 5.4.2
YARN Version: 1.1.0
OS: MacOS High Sierra

[lorenaramonda]

the @adampatterson solution seems to work because it generates the *.css.map file but when debugging the website via browser dev tools it did not link to the scss but to the css so apparently not working at all.
Here is what it writes inside the .map file:

{"version":3,"sources":[],"names":[],"mappings":"","file":"css/resume.css","sourceRoot":""}

[adampatterson]

@lorenaramonda Everything is still working as expected.

The one thing I noticed, however, is that you do need to have .sourceMaps() somewhere in your config or the source maps wont be connected. It doesn't matter where, So I updated my little source map block.

if (!mix.inProduction()) {
    mix.webpackConfig({
        devtool: 'source-map'
    })
    .sourceMaps()
}

I feel it's faster when you run a production build, Not scientific at all but it seems to be consistently a few seconds faster

Dev: 16.7 ( Sourcemaps )
Prod: 30 ( Sourcemaps )
Prod: 26.8 ( No Sourcemaps )

Hope that Helps.

[lorenaramonda]

Oooh thank you @adampatterson! That works!
I had issues because I also added some option to the sass function:

.sass('themes/default/src/scss/style.scss', 'css', { outputStyle: 'compressed', sourceMap: true, outFile: './map', omitSourceMapUrl: true })

but it's ok, I won't to that anymore 😅

[kvn1234]

You just saved me what little hair I have left, @adampatterson! Thank you.

[danki]

@adampatterson TY!

[Stetzon]

Is the solution from @adampatterson the official fix for this? The docs still seem to suggest that sourceMaps() is all that you need, but this still does not appear to be the case.

[adampatterson]

@Stetzon My config is still the same and it is still working even with Laravel 5.6.

[olytv]

Thanks, @adampatterson! I improved your solution for more configurations, for example:

if ( !mix.inProduction() ) {
    mix.webpackConfig({
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                Vue: ['vue/dist/vue.esm.js', 'default']
            }),
        ],
        devtool: 'source-map'
       })
   .sourceMaps()
} else {
    mix.webpackConfig({
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                Vue: ['vue/dist/vue.esm.js', 'default']
            }),
        ]
    });
}

In order not to repeat the code, I shortened it:

let dev = !mix.inProduction();
mix.webpackConfig({
   plugins: [
       new webpack.ProvidePlugin({
           $: 'jquery',
           jQuery: 'jquery',
           Vue: ['vue/dist/vue.esm.js', 'default']
       }),
   ],
   devtool: dev ? 'source-map' : false
})
.sourceMaps(dev);

Now my perfectionism is calm)
Thanks again for solving.

[bonovski]

I still can't get sass sourcemaps to work properly. They are being generated but the mappings are all wrong.
When inspecting the CSS in the browser the references are pointing to the wrong files.

[iredmedia]

For some reason I'm not able to use the applied solution to generate any sourcemaps. My sourcemap looked like this before adding the fix from @adampatterson.

   .js('...', 'public/js')
   .react('....jsx', 'public/js')
   .sass('', 'public/css');

[75th]

None of the solutions in this thread create SCSS sourcemaps for me, either. Implementing @lytvoles's code made the JavaScript sourcemaps stop working in addition to failing to create CSS ones.

[adampatterson]

@75th I updated to webpack 4 and it's still working for me.

But I agree, there isn't a 100% sure fire way it seems to get source maps working.

[Cactusx09]

Hi, if anyone had a problem with laravel vue sourcemaps try different types of sourcemaps
source-map and inline-source-map don't works for my project, but
cheap-module-eval-sourcemap works fine!

See here: https://github.com/vuejs/vue-loader/issues/620#issuecomment-569506869