Search code examples
asp.netsasssystem.web.optimizationbundletransformer

Sass transformation: each file preprocessing


Problem

We are using System.Web.Optimization bundling and BundleTransformer for SASS/SCSS. Is it possible to call some preprocessing before each sass file? Not only before files included in bundle, but before files imported using @import too.

If you want to do some preprocessing before each file in bundle you can add some custom IItemTransform or IBundleTransform, but imagine this:

Main.scss:
    @import '_mixin';
    some styles
_mixin.scss:
    some mixins

Main.scss is included in bundle and will be preprocessed, but _mixin.scss is not included in bundle, so scss compiler will get raw file from disk without any preprocessing.

Any hook into compiling process? Or some other way?

Why do we need this?

Our common static files are located in Core project. This core project static is included in other projects as virtual directory in IIS (in debug) or copied (in release). With this solution we can use '/SharedStatic/..' in any project and it's resolved always: as virtual directory in debug and as usual path in release.

So right @import to core project must be like that (works with BundleTransformer):

@import '~/SharedStatic/Styles/_mixin.scss'

But VS intellisense (or R# intellisense) and WebEssentials intellisense don't understand '~' imports at compile time. Intellisense understands only this:

@import '../../../../CoreProject/Static/_mixin.scss'

So idea is to preprocess scss files while bundling and fix imports from '../../..' to '~/'.


Solution

  • Nobody answered yet, so looks like there is no easy hook into building SASS.

    We solved this problem other way: stopped using virtual directories in IIS and included symlinks to shared staff in each project. Now it looks like every project has its own /SharedStatic (which is really symlink to Core Static). And this solves problem with SCSS as we can use '../../SharedStatic/' both in initial file and in file before compiling, no need to change pathes from one to another.