I've modified my VS 2015 project to remove the existing Bootstrap and FontAwesome NuGet packages in favor of getting those CSS libraries from bower. I've discovered that I can get CSS Intellisense working for those CSS classes by including the bootstrap.css and font-awesome.css files (several sub-folders deep under the bower_components project folder) in the VS project.
But I haven't yet figured out the magic to get the Glyphfriend extension to work in this configuration. Simply including bower_components/dist/css/bootstrap.css in the project satisfies Intellisense, but it doesn't get me icon pictures via Glyphfriend. I've tried including the svg files in the project, but that doesn't help. I've also tried copying the svg files to their previous home in the Fonts project folder, but that didn't help either.
Any suggestions?
The Glyphfriend gods fixed it.
Related
I use Visual Studio 2019 to develop a web ASP.NET MVC application.
When I debug, or execute my web application, with the browser debugger F12, I can read in the sources menu (view photo) that my pages are based on sccs style sheets located in a scss directory.
How to generated this directory? Why most of the css (coming from bootstrap) are translated into sass files ? Is it due to the package Web.Optimization which generate bundles? I don't understand the process and its utility.
Can someone answer my questions ?
For information, I installed bootstrap 4.5.3 with NuGet, and I noticed that several files where created in"Content" directory in the project explorer (bootstrap-grid.css.map, bootstrap-reboot.css.map, etc). So I think bootstrap is maybe the reason of scss files like _reboot.scss).
Scss files are translated (by engine Sass) into css. Only that files browser can understand.
I think files from picture are just in public folder.
(*.map, *.min.css, etc) files are optional.
In Bootstrap documentation is written:
compiled and minified CSS and JS (bootstrap.min.). CSS source maps (bootstrap..map) are available for use with certain browsers' developer tools
https://getbootstrap.com/docs/3.4/getting-started/#whats-included-precompiled
The minimized files are size optimized and maps are helpful for developer tools use.
Thanks Apan.
Finally, I can keep only the 2 files bootstrap.css and the js, because MVC minimizes them with bundling process.
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 have an ASP.NET webforms project that I checked in to Visual Studio Online today. Unfortunately, now when I run the project my stylesheets no longer load.
I have checked all files from the solution into visual studio online. Should I have not checked in the .css files? Also, I have tried checking everything out then running the project to the same effect of the stylesheets not loading.
Thanks in advance for your help.
These two things are only coincidentally related. VSO has no effect on the ability of your project to load style sheets. And yes,'you should check them in.
Tye most likely issue is that the path to the style sheets has changed. If you moved the whole solution around then you may have to fix the paths if they are not relative..
Can you check:
1) that the css files exist and are where you think they should be
2) that the style reference points to the correct relative path of those files
I am working on a rails app and I would like to include some custom css files inside my rails application. I would like to separate out the css from bootstrap and the css that I wrote. Could I just put the custom css files inside vendor/assets/bower_components folder in my own css folder?
Is there anything else that I need to do for my css files to be picked up?
There are several ways you can achieve bower functionality in a Rails application.
Although having said that, I'm not sure about your wanting to use it on your custom.css file. The file itself will work just as well if you keep it in your app/assets/stylesheets folder, which will concatenate it to the asset pipeline
Bower-Rails
You'll may wish to consider using bower-rails, which seems to just give you the ability to use bower within your Rails app. This seems to be specifically for helping you keep your dependencies up to date:
Dependency file is bower.json in Rails root dir or Bowerfile if you
use DSL. Check out changelog for the latest changes and releases.
RailsAssets
Another amazing piece of functionality we found recently is "RailsAssets"
This works really well (we use it in production), as it keeps your dependent assets completely up to date. You can use it very simply:
#Gemfile
source https://rails-assets.org
gem 'rails-assets-BOWER_PACKAGE_NAME'
#app/assets/javascripts/application.js
//= require BOWER_PACKAGE_NAME
When running bundle update, this will then give you the ability to update your assets in line with your app!
I have recently upgraded to VS2012 and have a small issue. All our sass files are checked into source control and the corresponding css file gets generated when the project is built (the css file is never part of source control). with VS2012, as soon as i edit the sass file, a css file is created under the sass file (nested under it) and the project file is checked out. I do not want this as we don't need to check in the css file.
Is there an option i can set to avoid this ? Had a quick look under tools ->options but didnt see anything
The only plugin we have installed is Mindscape Web Workbench free version.
Thank you for any advice.
So the Web Workbench plugin was automatically modifying the project file and including the following under my scss files. This was still present even when i disabled and removed the plugin. There's no option to disable this function in Web Workbench, so i wont be using it anymore.
<Compile>True</Compile>
<Minify>True</Minify>
<CompileStyle>Nested</CompileStyle>
<DebugInfo>False</DebugInfo>
Using SassyStudio now which is nice and simple.Has the option to disable auto css creation and project adding etc.
Hope this explanation can help someone else.