Skip to content

Sass and SCSS

Jump to bottom
Taritsyn edited this page Jun 6, 2024 · 24 revisions

BundleTransformer.SassAndScss contains one translator-adapter - SassAndScssTranslator. This adapter makes translation of Sass and SCSS code to CSS code by using the Dart Sass Host for .NET version 1.0.13 (supports the Dart Sass version 1.77.4). Also contains the SassAndScssAssetHandler debugging HTTP handler, which is responsible for text output of translated Sass or SCSS asset.

As a JS engine is used the JavaScript Engine Switcher library. For correct working of this module, you need to install one of the following NuGet packages:

After package is installed and JS engine is registered, need set a name of JS engine (for example, MsieJsEngine) to the name attribute of /configuration/bundleTransformer/sassAndScss/jsEngine configuration element in the Web.config file.

To use a debugging HTTP handlers in the IIS Classic mode (this also applies to the XSP web server for Mono), you need add to the /configuration/system.web/httpHandlers element of the Web.config file a following code:

<add path="*.sass" verb="GET"
  type="BundleTransformer.SassAndScss.HttpHandlers.SassAndScssAssetHandler, BundleTransformer.SassAndScss" />
<add path="*.scss" verb="GET"
  type="BundleTransformer.SassAndScss.HttpHandlers.SassAndScssAssetHandler, BundleTransformer.SassAndScss" />

How to upgrade applications to version 1.13.X

Steps required to update the BundleTransformer.SassAndScss module to version 1.13.X:

  1. Update the BundleTransformer.SassAndScss package to latest version.
  2. Uninstall the LibSassHost and LibSassHost.Native.* packages if necessary.
  3. Remove the precision and sourceComments attributes from the /configuration/bundleTransformer/sassAndScss configuration element in the Web.config file.
  4. Install one of the following packages: JavaScriptEngineSwitcher.ChakraCore, JavaScriptEngineSwitcher.Jint, JavaScriptEngineSwitcher.Msie (only in the Chakra “Edge” JsRT mode) or JavaScriptEngineSwitcher.V8.
  5. Register a JS engine.
  6. Set a name of JS engine (for example, MsieJsEngine) to the name attribute of /configuration/bundleTransformer/sassAndScss/jsEngine configuration element in the Web.config file.
  7. In Sass and SCSS code convert a unquoted values with interpolation in the url() functions (for example, url(#{$icons-path}/computer.png)) to quoted values (for example, url("#{$icons-path}/computer.png") or url('#{$icons-path}/computer.png')).
Clone this wiki locally