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.
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.
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!
