Sass failing to compile - Web Essentials 2013 Upda

问题:

I'm currently using Web Essentials 2013 update 4 to provide support for compiling .scss files in Visual Studio.

The tool has worked fine for me in the past however I have just created a new .scss file and have copied the bootstrap un-minified css into this new file.

Upon saving, the compilation window on the right hand side of the screen fails to update or display the compiled css or any error messages. Meanwhile, the blue bar at the bottom of my Visual Studio screen is stuck on

Compiling 0 dependent file for bootstrap.scss

Usually I would expect a bootstrap.css file to be generated from this as well as a bootstrap.min.css file but this is not happening.

Does anyone have any ideas how I can restore this back to normal working conditions?

回答1:

This was to do with the settings I had in my WebEssentials-Settings.json file. In version 3, the 'UseRubyRuntime' parameter needed to be marked as true to allow it to auto compile into the relevant files. Since version 4 this can be marked as false as WE now has a built in compiler which I believe may have been conflicting with the RubyRuntime version I was trying to use.

回答2:

I had a similar problem, after installing Web Essentials 2013 Update 4 the .scss files started throwing errors like this to the output:

Something went wrong reaching: ... 
SCSS: Site.scss compilation failed: The service failed to respond to this request
Possible cause: Syntax Error!

The only solution for me was this:

1. Uninstall Web Essentials
2. Delete %AppData%\Local\Microsoft\VisualStudio\12.0
3. Delete %AppData%\Roaming\Microsoft\VisualStudio\12.0
4. Repair VS 2013.4
5. Reinstall Web Essentials

Source: https://visualstudiogallery.msdn.microsoft.com/56633663-6799-41d7-9df7-0f2a504ca361/view/Discussions/1#15143

And a heads-up: If you import other .scss files, make sure they are in the correct location. When I updated Twitter.Bootstrap.Sass 3.3.3 via NuGet, the related .scss files were moved to a different folder and I had to update references. For example:

Before:

@import "../sass/bootstrap/_utilities.scss";

After:

@import "../stylesheets/bootstrap/_utilities.scss";

回答3:

I had the same problem, and spent some time uninstalling and re-installing Web Essentials. I tried deleting the parts of AppData that seemed to be related to Web Essential, all with no success at compiling the scss file.

So I created a new .scss with minimal content, that compiled. Then I started copying over pieces from the failing one. After a couple of copies, the new one failed too. I was able to zero in on the failure. It was caused by this line:

$highlightcolor: #67a0f;

Do you see the problem? the hex color code is missing a digit. it should have been 67a0f5. Fixing this fixed the problem with the original file.

I had gone over the file looking for syntax errors, but didn't spot the short color def.

I hope this saves someone some time and frustration.

回答4:

I had the same problem; in order to help diagnose it I created a minimal .scss file with dummy CSS rules - it generated the same error.

Then I went to my long-time tested and fully working legacy .scss file - it generated the same error. Something is wrong here, I thought.

After tinkering with the issue for a while, somehow it got fixed by closing Visual Studio, reloading and reopening the solution.

回答5:

Referencing the changelog, as of 2.5 for update 4 of Web Essentials:

• Removed all node.js based tools ◦Sass/LESS compilers JSHint/JSCS
  linters CSS AutoPrefixer Handlebars compiler SweetJS/LiveScript
  compilers

http://vswebessentials.com/changelog

So my understanding is, that it no longer compiles.

回答6:

I am having the same problem and have eliminated actual syntax errors and incorrect path references. I have found two things out about this.

1. This happens when there is a file that only specifies variables and has no actual scss or css markup. This is more of a hack as you may have to put unwanted css in a variables file.
2. Turning off Autoprefixer will resolve the issue entirely, but at the cost of not using this feature.

回答7:

I had this problem and determined that when I was running a Compile All SASS Files, the plugin was trying to compile files found in the /obj directory of the project which failed, and consequently caused subsequent compilation to fail. Deleting the /obj directory and restarting VS fixed the issue.

回答8:

I had a similar issue and turn out to be a reference to a SASS variable before it was declared. There were no warnings or errors. Once I move the reference to the right place it all worked fine.

回答9:

Going off of what others have said about Web Essentials. Looking at the change log, it states that for versions 2013 update 4 and up (meaning version 2015 as well),

Important! Bundling, minification and compilation of LESS, Sass and CoffeeScript is not longer part of Web Essentials 2015. Install the new extensions Bundler & Minifier and Web Compiler instead. Also, see this list of other web development extensions that might be of interest to you.

I found this neat little extension for visual studio, that compiles the SCSS file(s) on save into a CSS file (along with minification for that file).

You can get it here. The guy that created this extension also talks about the Web Essential issue as well, found here.