Chrome devtool for css(SourceMap)

[yoshiokatsuneo]

• I understand that GitHub issues are not for tech support, but for questions specific to this generator, bug reports, and feature requests.

Item	Version
generator-angular-fullstack	4.1.3
Node	6.9.1
npm	3.10.8
Operating System	OS X 10.12.3

Item	Answer
Transpiler	Babel
Markup	HTML
CSS	SCSS
Router	ui-router
Client Tests	Mocha
DB	MongoDB
Auth	N

When I inspect elements on Chrome
DevTool, it cannot show CSS source but just point to script tag embedded minified CSS. It makes very difficult to debug CSS.

Can I see CSS source on Chrome DevTool?

[fedfigca]

There are several steps to take before having correct sass sourmaps here, first the sass-loader doesn't generate correct sourcemaps if the outputstyle is set to compressed, but we want compressed output when we're not doing dev, so in webpack.make.js we replace the config.sassLoader config for this:

    if (DEV) {
        config.sassLoader = {
            outputStyle: 'expanded',
            precision: 10,
            sourceComments: true
        };
    } else {
        config.sassLoader = {
            outputStyle: 'compressed',
            precision: 10,
            sourceComments: false
        };
    }

then we tell the sass loader and css loader to generate sourcemaps, in the same file we change the config loaders sass section for this:

       {
            // SASS LOADER
            // Reference: https://github.com/jtangelder/sass-loader
            test: /\.(scss|sass)$/,
            loaders: ['style', 'css?sourceMap', 'sass?sourceMap'],
            include: [
                path.resolve(__dirname, 'node_modules/bootstrap-sass/assets/stylesheets/*.scss'),
                path.resolve(__dirname, 'client/app/app.scss')
            ]


        }

adding the ?sourceMap flag to the css and style loaders, this should be added only for DEV also, but the correct way to do it escapes me, maybe someone can help us here, or do another if/then like the above for this, but I'm sure there's a better way, maybe some hacky thingy like:

loaders: DEV ? ['style', 'css?sourceMap', 'sass?sourceMap'] : ['style', 'css', 'sass'],

I hope this helps