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 '~/'.
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.
Related
I'm very new to scss and css so please bear with me. I've done some research but found conflicting information.
I have 2 freelancers working on my project. Both freelancers make changes to:
style.css
style.css.map
style.scss
Everytime I merge their work I break the frontend. How can I merge their work without breaking everything?
I read online that these files should not be included in GIT? I also read that I should used GULP or LESS? Apparently, I should compile the merged code before committing? Seriously confused with the research.
How do I handle these files?
The .css file is generated from the .scss files.
Your developers should commit only in the .scss files.
In the most cases the .css file is not added to the repository at all. And you should not modify the .css file directly because it will be replaced with the next compilation of .scss the files.
GULP is just the tool that compiles the .scss files and create the css from them. Basically when using GULP you can create some functions where you can specify the input location(.scss), output location(.css) and additional rules, etc.
There are also other tools that can do this. Like Koala, Webpack.
You probably should not store generated files in git. In this case, the generated files would be the .css and .css.map files that compass (I'm assuming you use compass because of the tags) generates for you. You should store the .scss file in source control, and compile it to .css afterwards.
If the freelancers are making direct manual changes to the .css files, they should know that at each recompile those changes will be lost.
I am using a CSS framework, which has documentation for user-created extensions. But these extensions are all written in SASS files on GitHub.
Now this framework is only a single CSS file. But for the extensions they are requiring to use NPM, or clone the entire GitHub project, and start using SASS commands, which I'm unfamiliar with.
Is it possible that I keep the current configuration: I.e. only have the main framework CSS file, and somehow convert each extension SASS file to CSS file and add that to my /css folder? Or that's not possible?
**Edit: It's the Bulma CSS framework, and this is the link to the Extensions repository: Wikiki
If the number of files are not too much, you could convert them manually using an online sass compiler
SassMeiser is my goto choice for online Sass compilers.
Maybe if you could provide a link to the repo, we'll have more clarity on how we could deal with it.
Edit: I just went through the repo. They already have the .min.css file for each extension in dist dir. You're better off just downloading the .min.css file rather than converting it yourself. Remember, you need the .min.js files also for the extension to work.
I was planning to use Sass with my Spring-MVC application. From Sass-lang website I got this Maven LibSass Plugin. I have put it in my pom.xml
But I am really confused with what next?
The major doubts I have are:
Which directory I should keep my Sass files in?
How do I include them in my HTML files?
What should be the target dir?
As of now, if I keep directories as suggested by my plug-in, it crashes either eclipse or stalls maven clean and install goal execution. I very new to this concept. Do let me know if you need any other info.
Actually these are all up to you.
You can choose an arbitrary directory. Most probably you would not want to serve Sass files. Thus this directory should not be deployed. libsass examples use src/main/sass directory.
You should include the .css files created at the target directory manually. libsass does not handle this part. There is no automatic inclusion of the compiled .css files as in Ruby on Rails platform.
Target directory is arbitrary again. Remember the choice of directory depends on how you will refer to these files at views. For example if you will be manually referring them, most probably you'll want to specify a target directory that is actually deployed to application server, such as src/main/resources/css.
So I'm playing around with MVC6, and I've added bower.json & grunt.json, I've created my grunt tasks for generating my jQuery & bootstrap.css and its all sitting in the wwwroot folder as i expected.
But what about things like my site.css & my main.js files, the files that I will add to for the project over time.
What convention are people using when choosing a directory for this stuff?
Are we to add a Content folder and drop it in?
Is there something I'm missing, that i should also be using Grunt / bower for?
I do have app and vendor folders outside wwwroot.
In vendor, I customize libraries like bootstrap, themes.
In app I have my own css, less and js files for the application.
I also have an asset path inside app for anything that needs to be copied (folder font shown in the screenshot)
Then I use the opinionated really easy to use and way better than grunt or gulp tool: brunch.
With this simple config, I get sourcemaps, concat, jshint, and with --production also uglify, minify, csso.
Adding anything else to the pipeline is simple as installing a brunch-plugin, so I recommend to also check http://brunch.io/ out.
Any static files (.css, .js) should be added directly into the wwwroot path (e.g. wwwroot/scripts, wwwroot/css). Anything that will be compiled into static files (.ts, .less) should be put into an Assets directory (or whatever name you like) in your project and output into the wwwroot path during compilation (generally configured through grunt compilation tasks).
Long time lurker, first time poster.
I am moving from LESS to Sass, and would also like to begin using Compass on a few projects. I am using CodeKit to watch and initiate new Compass based projects, but I have also tried this from the command line with the same result. My question boils dow to this:
Creating a new compass project with "compass create [project-name]" builds out the basic structure for a Compass project, along with a config.rb file and three .scss files (screen.scss, print.scss, and ie.scss).
But why isn't the project pre-populated with the latest core Compass .scss files, helpers, etc? Am I wrong to expect a payload of core Compass files (Such as these: http://compass-style.org/reference/compass/) to show up in my project?
I can find them if I drill down to say, /usr/local/Cellar/ruby/1.9.3-p194/lib/ruby/gems/1.9.1... , but these are global and for all projects, not for customizing on a per project basis.
I feel like I'm missing a starter kit of .scss files with a default set of variables. Or that I am otherwise getting off on the wrong foot with how new projects are being initiated with Compass.
Compass is envirment for project. There is no need for it to be in your project dir. You can update it any time. You can use compass watch or sass with compass as lib. All you need is your project and config for compass. It's better way than have it in all projects especially if you have control version in project. In my way I just writing minimal deps files and that's all.
Starter kit creates in sass folder by default. So you don't missing nothing. But there is a clean files. All other stuff you should do like you want or try skeletons from github for example.