[Question] source-maps with css or sass?

[ericfong]

Hi,

I am using sass-loader to compile sass code. Can we have the source-map to trace back the source file with webpack for sass?

Currently, I setup Sass-loader by

 { test: /\.scss/, loader: "style-loader!sass-loader?outputStyle=expanded" },

with

    cache: true,
    debug: true,
    devtool: 'source-map',
    'output-pathinfo': true,

Is it possible to trace back the source sass file in chrome dev tools?

[glebm]

I am using this together with ExtractTextPlugin to output .css files. I cannot figure out how to enable source maps either.

[mllocs]

I'm trying node-sass sourceComments and sourceMap options but without success
https://github.com/sass/node-sass

[jeffling]

I have it sort of working, with ExtractTextPlugin no less @glebm

1. use node-sass sourceMap option sourceMap=map in sass-loader (probably doesn't do anything)
2. use css-loader sourceMap option sourceMap (this might be what you were missing)
3. choose your favourite source map option in the devtools option. I've used it with sourcemap and inline-source-map

[nickdima]

@jeffling are you sure sass source maps are supported?
From looking at the code it doesn't seem so. cc @jtangelder

[jeffling]

@nickdima you're right, it's basically just the compiled css. The original question asked for 'traced back to the source scss file', and so far I got the filename, not the actual sass code. It's helpful, but it would be nice to be able to use chrome workspaces to directly edit the file though.

[nickdima]

The reason source maps are not supported is that sass-loader passes the actual sass content to libsass and not a file, and it seems that libsass generates source maps only when a file is provided.
I couldn't find this documented in the libsass wiki but there's a comment by @svnieuw that talks about this.

libsass currently only supports source maps with sass_file_context. The source file (input path) can only be specified as path and not as data string.

Maybe we should specify this in the readme? cc @akiran @jhnns

[akiran]

gulp-sass had a similar problem dlmanning/gulp-sass#8
After digging in to gulp-sass code and docs,
I observed that file path is passed to node-sass instead of data if source maps is enabled.
gulp-sass either inlines source maps or uses gulp-sourcemaps to create a separate file.

Can we follow similar approach to sass-loader also ?

[nickdima]

I was also looking at this approach, I can try to make a PR.

[akiran]

@nickdima Thanks

[nickdima]

OK, a quick update on this. The approach is doable the only barrier being that node-sass needs to support inlined file contents in the source maps. There's a discussion about it here.

[offminded]

Work in progress here

[cowwoc]

@nickdima @offminded Any updates?

[jhnns]

We should check if this is possible with the current beta version of node-sass.

The current master branch is already using node-sass 2.0, so we can start playing with it now.

[kyle-johnson]

This works for me:

{ test: /\.scss$/, loader: ExtractTextPlugin.extract('style-loader',
 'css-loader?sourceMap!sass-loader?outputStyle=expanded&sourceMap=true&sourceMapContents=true') }

[schlaup]

It almost works...

With aboves config Chrome displays "stdin" as the source.

File name and path is missing. You need to change "sass-loader/index.js":

...

    opt.success = function (result) {
        markDependencies();
        var sourceMap = {};
        if (typeof result.map === 'string' && result.map !== '{}') {
            var sourceFilename = utils.getRemainingRequest(this);
            var current = utils.getCurrentRequest(this);
            var sourceMap = JSON.parse(result.map);
            sourceMap.sources = [sourceFilename];
            sourceMap.file = current;
        }
        callback(null, result.css, sourceMap);
    }.bind(this);

...

After this change you can map the source in Chrome's workspace and edit / save the file in Chrome as well.

Could you add this to the official NPM release?

Thanks!

[adri]

I can confirm the solution from @kyle-johnson. Thanks!

[jhnns]

Has been published as v0.4.1. I've added instructions to the README.

[nickdima]

How are you guys live reloading the css when using ExtractTextPlugin for having source maps support? I'm asking this since HMR doesn't work with ExtractTextPlugin.

[adri]

I use two different configurations (dev and prod).

On 03.04.2015, at 17:01, Nick Dima notifications@github.com wrote:

How are you guys live reloading the css when using ExtractTextPlugin for having source maps support? I'm asking this since HMR doesn't work with ExtractTextPlugin.

—
Reply to this email directly or view it on GitHub.

[nickdima]

But on dev you would want both source maps and hot/live reloading. How do you do that?

[Todilo]

@nickdima did you ever find a solution to this? I would really like hot/live reloading if posible, it's such a nice feature.

[jeffling]

@nickdima @Todilo what I've been doing is to just use webpack in watch mode instead of dev-server, and using http://livejs.com/ (or fb's flo or any other css reload plugin) to get live reloading.

[Todilo]

@jeffling ok, I was thinking of look into if there was a tool for that instead since I do not use the dev-server atm (getting everything working isomorphic in mvc5 is no simple task). Thank you I will try livejs.com. Guess I only need the css changes updates as reloading entire page when working with SPA seems like a bad idea.

Only downside is that the scss sourcemap is not updated, any way to deal with that?

[jeffling]

@Todilo if you use inline source maps, it should be updated I think.

[Todilo]

@jeffling dont know how to set that up. However since I do most development in Chrome I setup a mapping from the the .scss from the server to the local location on the filesystem. Then I can both make changes in the browser(directly changin the scss files) as well as make changes in visual studio.

Still if I make changes in VS I dont get updated .scss file but well, whatever :) (if you dont have an easy guide on how to set tha tup).

Edit: Now I read the documentation again and saw the setting you were talking about:
// must be 'source-map' or 'inline-source-map'
devtool: 'source-map',

Now it works perfectly. I can change the sourcecode from .scss / browser and everything is updated live as well as correctly! Perfect!

[jhnns]

inline-source-map is the best option for development, because it requires no setup to retrieve the original source. However, it's not suitable for production, that's why we leave it up to the user to configure.

[teameh]

Thanks, this works indeed @kyle-johnson. But it doesn't if you would like to use React-Css-Modules. Any ideas? http://stackoverflow.com/questions/34434849/how-to-get-sourcemaps-working-for-react-css-modules

[JustMaier]

I started with what @kyle-johnson provided and then made it so it still had HMR in dev mode.

var isDevelopment = process.env.ASPNETCORE_ENVIRONMENT === 'Development', //Replace with whatever you're using to determine if this is a dev env
    extractCSS = new ExtractTextPlugin('site.css', {disable: isDevelopment}),
    sassLoader = [
        'css'+(isDevelopment? '?sourceMap=true': ''),
        'postcss',
        'sass'+(isDevelopment? '?outputStyle=expanded&sourceMap=true&sourceMapContents=true': '')
    ];

if(isDevelopment) sassLoader.unshift('style');

var config = {
    module: {
        loaders: [
            { test: /\.scss/, loader: extractCSS.extract(sassLoader) },
        ]
    },
    plugins: [
        extractCSS
    ]
};

if(isDevelopment) config.devtool = 'inline-source-map';

[pdrittenhouse]

Here's what I did:

1. Make sure to include devtool: "source-map", before the module property.
2. Be sure to add the ?sourceMap option to both the css-loader and sass-loader or pass a config property to the sass-loader.

loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap!sass-loader?sourceMap'),

or

`loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap!sass-loader?config=sassLoader'),

sassLoader: {

    outFile:        './httpdocs/wp-content/themes/PDFK/build/styles.bundle.css',

    outputStyle:    'expanded',

    sourceMap:      'true'

},`

Here's what my webpack.config.js looks like:

`var path = require('path');

var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {

entry: './httpdocs/wp-content/themes/PDFK/js/scripts.core.js',

output: {

    path: './httpdocs/wp-content/themes/PDFK/build/',
    filename: "scripts.bundle.js",

},

devtool: "source-map",

module: {

    preLoaders: [

        {

            test: /.*\.js$/,

            exclude: [
                /(node_modules|vendor|wp-admin|wp-includes|plugins|twentyfifteen|twentysixteen|twentyseventeen|libs)/
            ],

            loader: 'jshint-loader'

        }
    ],

    loaders: [
        {

            test: /.*\.js$/,

            exclude: [
                /(node_modules|vendor|wp-admin|wp-includes|plugins|twentyfifteen|twentysixteen|twentyseventeen|libs)/
            ],

            loader: 'babel-loader',

            query: {

                presets: ['es2015']

            }

        },

        {

            test: /.*\.js$/,

            exclude: [
                /(node_modules|vendor|wp-admin|wp-includes|plugins|twentyfifteen|twentysixteen|twentyseventeen|libs)/
            ],

            loader: 'uglify'

        },

        {

            test: /\.(png|woff|woff2|eot|ttf|svg)(\?[0-9].+)?$/,

            exclude: [
                /(node_modules|vendor|wp-admin|wp-includes|plugins|twentyfifteen|twentysixteen|twentyseventeen|libs)/
            ],

            loader: 'url-loader?limit=100000'

        },

        {

            test: /.*\.scss$/,

            loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap!sass-loader?config=sassLoader'),

            fallbackLoader: 'style-loader!css-loader!sass-loader'

        }

    ]

},

plugins: [
    new ExtractTextPlugin('styles.bundle.css')
],

sassLoader: {

    outFile:        './httpdocs/wp-content/themes/PDFK/build/styles.bundle.css',

    outputStyle:    'expanded',

    sourceMap:      'true'

},

watch: false, 

watchOptions: {

    aggregateTimeout: 500,

},

keepalive: false,

};`

[goztrk]

  {
    test: /\.(scss|sass)$/,
    loader: 'style!css?sourceMap!postcss!sass?sourceMap'
  },

this is directly from my config. (ejected create-react-app) it works just fine for me. You need to add ?sourceMap to css loader.

[shannonsumner-zz]

I was able to get it working by doing the following:

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: [
        path.join(__dirname, 'src/index')
    ],
    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: "/dist",
        filename: 'js/bundle.js'
    },
    devtool: 'source-map',
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: [ 'es2015' ],
                    plugins: [ 'transform-runtime' ]
                }
            },
            {
                test: /(\.scss|\.css)$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: true
                            }
                        },
                        {
                            loader: 'sass-loader',
                            options: {
                                sourceMap: true,
                                outFile: 'css/bundle.css',
                                outputStyle: 'expanded',
                            }
                        }
                    ],
                })
            },
            {
                test: /\.(png)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 100000,
                        outputPath: '../images/',
                        publicPath: '/dist/images/'
                    }
                },
            }, {
                test: /\.jpg$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        outputPath: '../images/',
                        publicPath: '/dist/images/'
                    }
                }
            }, {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                        outputPath: '../fonts/',
                        publicPath: '/dist/fonts/',
                        mimetype: 'application/font-woff'
                    }
                }
            }, {
                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                use: {
                    loader: "file-loader",
                    options: {
                        outputPath: '../fonts/',
                        publicPath: '/dist/fonts/'
                    }
                }
            }
        ],
    },
    resolve: {
        modules: [ 'node_modules', './src' ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        }),
        new ExtractTextPlugin({ filename: 'css/bundle.css', disable: false, allChunks: true }
        )
    ]
};

[xuyongli]

@shannonsumner And do you find that your css was not compiled when you use disable option in new ExtractTextPlugin?

[shannonsumner-zz]

@xuyongli I don't think I tried with disable: true