1

when using SASS and concatenating my files using gulp, and inspecting element I am not able to see where the css is coming from. The chrome Dev Tools does not specify a line and file number for the CSS. I have a main file main.scss in which I am importing 2 different files as such

@import "test1";
@import "test2";

In each of those files I have one line of code for testing, 

// test1.scss
    .test{
        background: #ccc;
    }
// test2.scss
    .test{
        background:#red;
    }

Below is my gulp code to produce the output file. 

gulp.task("css:vendorTest", ["clean:vendorTestCss"], function () {
    gulp.src([
            "Content/Styles/main.scss"
    ])
        .pipe(sass())
        .pipe(sourcemaps.init()) // gulp-sourcemaps
        .pipe(concat("vendorTest.min.css")) // gulp-concat, simply brings them to one file. 
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(paths.cssDest));
});

When I inspect element on this is what I see in chrome dev tools. enter image description here When I click on the link "main.scss:4" link goes to the main.scss css reference page, but I am not able to see any line numbers or the original file such as test2.scss from which it is originally coming from. enter image description here This is a big problem when used on the actual site, because the compiled file ends up having 16,000 lines of css and there is no way to find the css selectors origination. I cant tell if this is an issue with how I am setting up sourcemaps, or if it is chrome dev tools? any suggestion would help, thanks!

William Howley
  • 483
  • 4
  • 20

1 Answers1

0

For that you need a sourcemap file.

I use the koala app for converting sass to css and in that, there is a option to create .map file

relevant screenshot

Anup Bidwai
  • 1
  • 3