We’ve been working on our Master CSS files. These are files that repsent a section of the site.
Historically we would dump a load of CSS files in a
MasterSiteAreaCSS.aspx and it would look somethign like the following….
This has served it’s purpose for years, but it’s getting very tired. Firstly it relies on a nasty ASP Includes hack. It also doesn’t allow us to do anything clever with the CSS files.
Our frontend dev is desperate to get on to playing with SCSS, so we decided to start playing with it to see what little changes we could make to our code to get a similar implementation using SCSS.
Here’s our first attempt:
This worked for files in the same directory, but we seemed to get errors when trying to get files off the route.
Eventually I worked out the correct syntax is to use
Which now seemed to work from an IDE, but had issues when talking to a build server. What we needed to do was add metadata to describe the compilation process for a build command to pick up.
We opted for Gulp
This got us the behaviour we wanted. Time to go further, could we minify the css as well?
Looking good, but then we realised it was doing some compilation in areas we didn’t want it to.
We decided to include gulp-filter to fix this.
This seemed to work nicely. I wanted to get
gulp-filter working without the function - there is a declaritive syntax, but I couldn’t get it working.
Remeber to add
node_modules to your