We plan on using SASS instead of plain CSS for our SharePoint project very soon. While testing and trying to set everything up, I ran into some problems:
We're using Visual Studio 2015 and on my developer machine I installed the Web Compiler Extension to compile the .scss-files and partial files to a regular .css-file.
That worked very nicely but the problem is, that there will be a few developers working simultaneously on the styles. I want to avoid merging the resulting css-file each time someone tries to check in something into source control (we're using Team Foundation Server).
Since there is a build running every time someone is checking in their changes, and to deploy the resulting solution to the nightly build machine, the idea was to somehow include the SASS compiler in the build definition. This way the more readable scss-files get merged and the build creates the resulting css-file to include it in the solution.
Maybe I'm thinking too complicated, but I just couldn't get that to work so far.
Any ideas how I can achieve that?
(Maybe I should also mention that none of the dev machines got any internet connection)
If you're building an MVC app, you can use MVC's bundling feature along with the SASS NuGet package. And, be sure to enable minification. There's a UseNativeMinification property on SassAndScssSettings. That way you don't need to deal with merging the css file when you get latest or check in. Reference this thread: SASS/TFS best practice
Another way is running a script (e.g with PowerShell task) on the server that to install the gulp components and then call the sass compile task to compile the SASS. Refer to Powershell build - compiling SASS for details.
Related
I'm working on a cross-platform command line app that converts a user's text files into HTML output (similar to Markdown), and I want to provide the users an option to customize the output style with SASS/Less. Is there any CSS preprocessor/compiler library out there that I can use to compile stylesheets at runtime?
LibSASS requires installing things on Linux, which I'm trying to avoid because this needs to be a simple "one-click, run anywhere" utility without any dependencies apart from .NET Core. If I remember correctly, it also had conflicts when trying to import multiple platform NuGet packages in the same project.
I started with dotless but I've already stumbled on like 3 serious bugs and that project hasn't been updated since 2018 so I don't think they're getting fixed anytime soon. And I don't want to tie my project to a dead library for a pretty central functionality.
Looks like SharpScss is what I'm looking for. By adding
<PropertyGroup>
<RuntimeIdentifiers>win-x86;win-x64;linux-x64;osx-x64</RuntimeIdentifiers>
</PropertyGroup>
to the project file, the SASS parsing runs in both Windows and Linux (haven't tested on OSX) without having to install or configure anything.
Is there a possibly way to install sass singularity in VS Community 2015?
I had the same problems and had to do some digging around to find the solution. So I'll explain my steps (This may not be the correct or best way, but it works, I have been using it and adding to it without problems so far over the last week or so).
As a quick aside, visual studio (at least from 2013 onward and certainty 2015, cause that's what I use) does support bower, grunt and gulp as far as I know. I just don't know how to use these systems. So there may be a faster, more robust, and better way to do this.
To save you time later, you will need to follow the steps below to download the Breakpoint library because it seems the singularity library has a dependency on it. But it's the same steps.
Go to the GitHub repo and download the repository as a zip file and extract it.
In the case of breakpoint go into the stylesheets extracted folder and copy and paste them into a folder you created inside your project.
While doing this create another folder and do the same thing with Singularitygs (it has the same stylesheets folder).
In your visual studio project click show all files and include both these new folders - this will have the effect of including all the files within them.
Goto extension manager and download the free Web Compiler (part of the web essentials toolkit). This gives VS the ability to do all kinds of cool stuff with cool files such as automating the process (without any extra setup) of transforming your SCSS files to CSS. You may need to restart VS after installing it.
Finally - create your own .scss file, and at the top add these includes:
#import '../_breakpoint.scss';
#import '../_singularitygs.scss';
You'll need to use VS intellisense help to ensure you are pointing to the correct folder locations for your setup.
Once they are included you can work away like normal on your .scss using all the new library functionality.
This seems to be the process for installing any .scss / less library in visual studio. But I'm surprised I did not see any info around about how to do it. I had to spend a while digging through the code of all 3, especially web essentials, to figure it out - only to find out that I did not need to even look at the code at all. :)
Hope this helps.
I am in the process of creating a website using Mono. It will be a standard webforms app (not MVC) but I'd like to use SASS for the CSS (specifically scss). However, I can't seem to get SASS to work with a mono webforms application. I tried using SassAndCoffee from NuGet and followed the standard setup instructions which said I should just reference my scss files as css files (e.g. application.scss would be referenced as application.css in a link attribute in the head. see http://blog.paulbetts.org/index.php/category/programming/mono-net/). That didn't work (or at least I'm assuming it didn't since my page rendered with no CSS and this scss has been tested on a rails platform so I know it works).
Next I tried using SquishIt which has an NSass wrapper. I followed the instructions here: http://www.cassandraking.net/wordpressapp/integrating-sass-into-net-using-nuget-and-squishit-sass/. This throw a 500 error because asp.net was unable to find NSass.Wrapper.proxy.dll. A quick google search led me to discover that because I was targeting "Any CPU", it couldn't choose between "NSass.Wrapper.x86" and NSass.Wrapper.x64". Sadly, however, MonoDevelop doesn't seem to want to give me the option to target x86 or x64 (the only option I have is to target "Any CPU").
I've kind of run out of options. Since I'm not using MVC, am I able to using SASS with a standard WebForms project using the Mono platform? Has anyone done this and can provide me some pointers?
In case anyone else runs into this, I never really found a viable solution in terms of a plugin. Honestly, Xamarin studio doesn't even seem to have a built in SASS editor as it isn't able to colour code anything in a SASS file. I ended up just using the sass command in terminal to convert a sass file to css. At a terminal prompt in the folder where your sass is kept type:
$ sass mysassfilename.sass:somecssfilename.css
To edit the sass file, I downloaded Microsoft's Visual Studio Code which has a version for the mac. It works rather well.
I'm currently planning a new Windows Store App and wondered whether it would be at all possible to use SASS to help streamline some of the CSS development by utilising features such as mixins and variables etc.
I'm currently using Web Essentials to compile the SASS for web projects and wondered whether I could leverage its abilities on the app side of things.
What I've tried:
On the off-chance that it might work... I've tried adding an SCSS file to the universal app using Add > New Item... but the option doesn't exist (which doesn't bode well). I tried renaming an existing CSS file's extension to .SCSS. However, when saving the SCSS file, VS2013 explodes in a cacophony of popups suggesting that I tell Microsoft about the problem and then restart - which isn't really the result I'm after.
Problem:
I have been trying to integrate minification of javascript and css files in our VS2010 (.net 4.) projects. From what I hear, .net 4.5 and VS2012 will have minification build into the editor, so it will be as easy as setting a flag it will work. Unfortunately we are sill on VS2010 (.net 4.0).
Let me explain what I want to do and what I dont want to do.
I dont want to do big setups with classes/config file(s)/etc just to minify because all that stuff will have to be loaded on our build machine and even the build xml files might have to be modifies to make it work. Also, once we go to vs2012 and .net 4.5 all these configs/classes/etc will have to be discarded because vs2012 will have the build in functionality.
Here is what I think might be the best option. Since I am using the ScriptManager and it can already pull either a .debug.js (non-minified) or a .js (minified) script based on the build type, it seems all i need to do is to have some sort of (pre?) build event that will re-build a non-minified .js file into a minified one. Obviously the build event will have to call a minication module which would have to be installed on local computer (the YUI Compressor seems very nice). The module would update the minified .js file.
I have been reading about this, but I am getting a little bit lost. There are a lot of third party tools with bunch of setup and classes which I do not want to add.
Did anyone do something similar as I explained about?
If not what is the next best simple solution?
(By the way, if you are going to say move to VS2012/4.5, thats not a solution for us at this point)
Solution:
Thank you Parv Sharma for your answer.
I would just like to explain what I did so that it may help someone in the future.
I installed the Microsoft Ajax Minifier
Created a batch file to add minifer to ENVIRONMENT PATH variables: setx path /m "%PATH%;C:\Program Files\Microsoft\Microsoft Ajax Minifier"
Added the following pre-build events into my project:
ajaxmin $(ProjectDir)Script.js -out $(ProjectDir)Script.min.js -clobber
If Script.min.js does not exist, it will be created by the build event, but it will not be added to the project (not sure how to do that through the events).
When you add a new script file, mynewscript.js, just create a second blank file called mynewscript.min.js and add an pre-build event for it.
Using this approach the only thing you have to do to the build machine is run the Microsoft Ajax Minifier setup package and the batch file. Thats it everything else will be part of your pre-build events.
what you are looking for is probably this
http://ajaxmin.codeplex.com/documentation
by using this you would be able to use this third party tool as the minifier
after downloading the tool you have 2 options
1. edit the MSBUILD file to include building the js as per build event
OR 2. to attach this tool to VS and assign a key compbination to it.. this way you would be able to minify whenever you want just like we do F5 OR Cntrl-Shift-B
Attaching to VS is easy just to to external tools and in the Tools menu and add this tool with the required params