CODEWITHSUNDEEP
visual-studio-2013sassweb-essentials
user3791520
user3791520

Reputation: 21

SCSS compile error in Visual Studio Express 2013 Web Essentials

I am trying to get Sass to work in Visual Studio Express 2013 for Web using Web Essentials. When I include the most basic scss file, I get a compilation error. Here is my sample file:

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

The error I am getting is:
Compilation Error occurred (see error list to navigate to the error location): Error found:

However, the error in the Error List of Visual Studio is blank and only says Line 1 Column 1 with no further information. It also does not matter what I have in the scss file, get the same error even with only the body tag with open and close brackets.

The VS version is: 12.0.30501.00 with Web Essentials 2.2

Any help would be really appreciated. Thanks!

Upvotes: 2

Views: 3367

Answers (2)

Arif Dewi
Arif Dewi

Reputation: 2272

Sass + Web Essentials doesnt allow to rename the files, they begin to throw compile errors. Please check you didn`t rename it. Or you can copy content of the file, drop it and create new one with old content. Everything will be ok.

Other reason may be your files after check-in source code are in read-only state and Saas compiler cant chekout it automaticly, so you need uncheck readonly flag from folder with *.scss - or just check-out for edit them from TFS.

Today I found another reason - sass cache. It can be removed from here - C:\Users\%Username%\AppData\Local\Temp\

Upvotes: 1

wolfyuk
wolfyuk

Reputation: 760

In my case, this was due to an included .scss file itself attempting to include another .scss file that was too deep in the directory hierarchy for node-sass to deal with. I isolated which file was causing the problem by debugging Web Essentials and hijacking the call to node-sass to see the real error output which was:

D:\Path\Assets\Areas\Area\/Section/section.scss:1: error: file to import not found or unreadable: '../../../Shared/Mixins/buttons.scss'

Prepending ./ to the path to the second included file fixed the problem in my case, as per this issue that I eventually stumbled upon. e.g.:

@include './../../../Shared/Mixins/buttons.scss';

Upvotes: 0

Related Questions