Looking at the following link: www.sitefinity.com/.../app-theme-does-not-render-on-the-frontend
It suggests : "When utilizing Feather and pure MVC templates layout files and resource packages have to be used instead of App themes"
It also references three links, but none of those recommend an approach or best practice for adding customizations in such a way that won't interfere with package updates.
Also, you have to setup Node.js etc. and use SASS to stick with the practice being used within the package.
Is there a document describing best practice for where to store your custom CSS, Images, JS, etc.?
So to use Bootstrap are you suggesting perhaps making a copy of the Bootstrap package, giving it a new name and then making your own changes in there?
As for Web Essentials. Thanks I'll have to check it out, but off-hand does it handle SASS/LESS compiling, minification, etc?
Wow I'm having a ton of problems doing this.
I installed all the Web Essentials components, made a copy of the Bootstrap package and gave it a sensible name, then right clicked on the sitefinity.bootstrap.scss file selected compile and compile on build.
No matter what I do it keeps failing on the sf-mt-xxs issue reported by Jochem on GitHub even though I've replaced it as recommended.
From what i can tell it's not picking up the variable names used in _common.scss. On line 26 and 27 of _common.scss it also makes use of mixins which it can't find even though they're there in the _mixins.scss file.
Do I need to reference the _mixins and _variables files in _common.scss?
IMHO. It is better to create new resource package and store everything related template(images,css,js,saas,less,bower) inside this folder.
And for SAAS/LESS tricks, bower and etc, you dont need to install node.js. I want to suggest to use http://vswebessentials.com/. This plugin is amazing.
Yes. I think it is better to create copy, instead editing existing.
Web Essentials handle compiling, minification, bundling, bower and etc. I can't live without this plugin
Here's an example of where I'm not sure how to replace the NodeJs route with Web Essentials.
On a standard installation the basic site will render a Bootstrap Template with sitefinity.bootstrap.css which is obviously compiled but it comes from sitefinity.bootstrap.scss which has the following references:
//Import Bootstrap from npm
These don't exist I assume because Node and all the relevant modules haven't been installed.
I'm not sure what those files contain, but going the Web Essentials route, how do you configure the build so that all relevant files are built and output correctly?
To compile sitefinity.bootstrap.scss you need to do some short steps to configure web essentials
1) I am using bower instead npm. You need to add bower.json in your resource package folder
It will install all necessary dependencies
2) You need to change lines in sitefinity.bootstrap.scss. Replace npm to bower
//Import Bootstrap from bower
3) You need create(or edit) compilerconfig.json in root of your VS project
After this steps you will be able to successfully compile sitefinity.bootstrap.scss file