Skip to content
December 19, 2013 / windperson

Visual Studio sass compile MSBuild task

  • Following instruction here to install Ruby & Sass on the target windows machine.
  • Add ruby execution path to System “PATH” environment variable.
  • Add an environment variable sass_compile, and set it to 1.
    (This is for enable/disable SASS compile task if you don’t use command line build or use Mindscape Web Workbench’s auto compile sass feature instead.)

And here is the compile sass to css MSBuild task, save it as a xml file and include in MSBuild task of the target project:

<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  <PropertyGroup>
    <BuildDependsOn>
      CompileSCSSfileTarget;
      $(BuildDependsOn);
    </BuildDependsOn>
  </PropertyGroup>

  <Target Name="CompileSCSSfileTarget" Condition="'$(sass_compile)' == 1">
    <Message Text="**Compile .scss => .css**"/>
    <CreateItem Include="Content/css/**/*.scss">
      <Output TaskParameter="Include" ItemName="SCSSFiles"/>
    </CreateItem>
    <Exec Command="sass -C %(SCSSFiles.FullPath) %(SCSSFiles.Filename).css" WorkingDirectory="assets/css/"/>
  </Target>

  <PropertyGroup>
    <AssignTargetPathsDependsOn>
      $(AssignTargetPathsDependsOn);
      AssignGenerateCSSfileTarget;
    </AssignTargetPathsDependsOn>
  </PropertyGroup>

  <Target Name="AssignGenerateCSSfileTarget">
    <!--<Message Text="**Add just generated css file into project group that will being packaged.**"/>-->
    <ItemGroup>
      <Content Include="Content/css/**/*.css"/>
    </ItemGroup>
  </Target>
</Project>

This build task will call sass to compile all the .scss files into .css files under the Content\css\ folder, and include those produced .css file into build process.

Note:

Be sure to set those .scss files Build Action as “None”, otherwise, those files will also wrap into web publish package.

set Build Action to None

set Build Action to None

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: