SASS / source maps not loading with nested structures

I went from all the SASS files being in the same directory, to a nested structure as follows. Now, when I inspect an element in chrome, it takes me to the incorrect source map. For example, when I inspect a button, instead of going to the _buttons partial, it goes to a different random partial that is unrelated. Anyone know why this is happening? Does something need to change in my gulp file?

enter image description here
enter image description here

enter image description here

Answer

https://www.npmjs.com/package/sass-module-importer

The issue had to do with how we were importing the sass and css files together in the main.scss file, and doing the copy of css files in the gulp file. The easiest solution was to include the sass-module-importer. The gulp file is updated below with the final solution.
enter image description here

Leave a Reply

Your email address will not be published. Required fields are marked *