Import causing syntax error in scss using Visual Studio

Question

I imported into my Visual Studio 2013 a template that I purchased using scss. I then installed the latest Web Essentials to use this feature but I am struggling with it.

Here is a sample of my structure

main.scss /* imports several child scss  */
@import 'helpers/sub1';   
@import 'helpers/sub2';   
@import 'helpers/sub3';  

My issues comes when in a child scss it refers to another scss. See print screen below the

Answer 1

I found problems such as this all the time, when using Web Essentials to compile SASS. In my opinion the SASS compiling has always been a bit flaky in Web Essentials. In fact they have taken the decision to remove compilation from Web Essentials 2015 (see 2015.0.2 in changelog)

In the end I ditched Web Essentials in favour of compiling with Grunt and using Task Runner Explorer in Visual Studio to manage the running of my Grunt task. I found this a much better way of compiling.

If you want to look in detail at how to implement this with Grunt and Task Runner Explorer, I wrote a post about it