I decided to combine my CSS by including other CSS files withing a single one.
mystyles.css
#charset "utf-8";
#import url("font-awesome.min.css");
#import url("bootstrap.css");
#import url("bootstrap-theme.css");
html {
position: relative;
min-height: 100%;
overflow-y: scroll
}
It seems it includes CSS but font awesome stopped showing icons, because it also references fonts as in:
#font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');
My file structure is
/incl/css/mystyles.css
/incl/fonts/font files
How do I fix icons?
Consider using FontAwesome's CDN, it would prevent this kind of problem.
Besides, this way you can update it quickly.
Register and get your embed code at http://fontawesome.io/get-started/
Or directly at (check the version): https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
Related
Sorry if this is a silly question, I'm completely new to bootstrap and ASP.NET.
I'd really like to change the nav-link colours for my web application but applying inline CSS and changing the bootstrap.css is not working. According to inspect all CSS for the nav-links are being overridden by Navbar.less
Screenshot of inspect:
Bootstrap v3.4.1
Of course you should be compiling bootstrap's files combined with your style to make a perfect match, taking advantage of bootstrap variables, and overriding them in case of need. You can compile it automatically when saving using editor extension or other way you choose.
I assume you are using bootstrap 3 because it uses less files.
main.less <-- your file
#import "path/to/bootstrap.less";
// your overrides here: (see file variables.less)
#navbar-default-color: white;
#navbar-default-bg: pink;
// and also
.my-primary-border {
border: 1px solid #brand-primary;
}
// and rest of your styles.
my-html.html
<!-- main.css is automatic output of main.less -->
<link rel="stylesheet" href="main.css">
If you're using bootstrap 4/5 it's the same idea. See here
I'm struggling with the dotLESS #import to have a separate variables file; I just constantly get "variable is undefined".
If I browse to the variable config file it works; if I put the variables inline in the main stylesheet it works; but in an #import, no dice. I'm mapping .css as well as .less to the extension, however it also doesn't work if I use .less only.
The variables file LESS-config.less is:
/*
.LESS VARIABLES
*/
#mbw_dark_cyan: #1293b5;
#mbw_cyan: #11add4;
#mbw_magenta: #e935da;
#control_text: #ffffff;
#action_delete: #ff5400;
#section_level1_bg: #mbw_dark_cyan;
#section_level1_fg: #control_text;
#button_bg: #mbw_dark_cyan;
#button_fg: #control_text;
#button_icon: #control_text;
#data_table_header: #mbw_cyan;
.dummy {
color: #control_text;
}
Which renders as:
/*
.LESS VARIABLES
*/
.dummy {
color: #ffffff;
}
Calling stylesheet main.css is:
#import (less) '/css/LESS-config';
button {
background: #button_bg;
}
Which gives the error:
variable #button_bg is undefined on line 4 in file '/css/main.css':
[3]: button {
[4]: background: #button_bg;
----------------^
[5]: }
As I said, if I replace the import with the same variables copied and pasted, it all works fine.
I've tried saving without BOM as in another answer, but that doesn't help.
EDIT, I've tried:
Removing the (less)
Changing to double quotes
Using relative path LESS-config as opposed to virtual absolute as above
Adding logger="dotless.Core.Loggers.AspResponseLogger" log="debug" to
web.config (cache is already false)
Adding debug="1"
Adding
debug="true"
Absolutely no change in behaviour.
EDIT 2:
I created a cut-down css that only had the import statement in it; when I browse to it the imported styles are in there. However, on a refresh, I just get a blank response.
So it seems to be something to do with my IIS config / caching? I've turned off content compression but no joy; disabled all output caching for .less and .css, still no joy!
FIXED as per Toni's comment; https://stackoverflow.com/a/51754771/318411:
This turned out to be a dotLESS issue, tracked on GitHub here: https://github.com/dotless/dotless/issues/553
The complete fix was to:
Upgrade dotLESS to version 1.6.7
Downgrade Microsoft.Extensions.DependencyInjection to 1.1.1.0 due to Method
not found error
Change the file extension of the import from .css to .less
Now all working.
Please try version 1.6.7 which fixes an error that imports are only executed on the very first request.
I potentially see two problems that you have.
You are trying to call #import (less) in a css file. This is a syntax specific to less framework.
Your main.css is not a less file.
Change your main.css to a main.less file and now try generating your css from main.less as your root file.
Assuming your import url for LESS-config.less is correct.
The above mentioned corrections should probably do the trick.
#import (less, optional) "mystyle.css"; is Less syntax, you cannot use it in CSS (Less #import Rules).
If you want to use #import in your CSS, it should follow this syntax (See here)
#import url|string list-of-mediaqueries;
But, you cannot import a Less file inside your CSS anyways.
The way I would have done this:
Say you have 3 .less files: config.less, color.less, header.less
I would create a style.less file with the following content:
/*------------------------------------------------------------------------------*/
style.less
/*------------------------------------------------------------------------------*/
/* 01. config */
#import "config.less";
/* 02. color */
#import "color.less";
/* 03. header */
#import "header.less";
Then I would complie style.less which would produce, style.css and I would include style.css in my website.
I'm trying to import some classes from a CSS file like bootstrap.css to my site.scss SASS file, not all of them. The problem with following code is that I get all bootstrap classes in my compiled site.css file:
site.scss
#import "bootstrap";
.my-div-md-6
{
/*some other styles*/
#extend .col-md-6;
}
On the other hand, It is possible to do this with LESS by importing bootstrap.css as reference using this code:
site.less
#import (less, reference) "bootstrap.css";
.my-div-md-6{
/*some other styles*/
&:extend(.col-md-6);
}
The compiled output of LESS is very light as below:
site.css
.my-div-md-6 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
#media (min-width: 992px) {
.my-div-md-6 {
float: left;
}
.my-div-md-6 {
width: 50%;
}
}
.my-div-md-6 {
/*some other styles*/
}
Is it possible to achieve this with SASS? If yes, giving a quick example would help.
Unfortunately, there is not simple answer and at the time of writing this, Ruby Sass does not natively support the LESS import (reference) feature.
TLDR; Suggestions:
use uncss or postcss to remove the compiled css from file before finalising stylesheet.
if you can, use mixins and placeholder classes as a rewrite of the scss file, but this is the MOST time consuming.
import "file" as partial such that file="_file.scss" and #extend .class if you absolutely have to, (manual method but suppose it'll work)
UNCSS
You can use uncss as a package from npm to remove the compiled css (I know this isn't efficient, but if you had to use SASS), then you'd remove the chaff that's generated from the example bootstrap import.
HOW?
QUOTE: SO-Answer-Joesph
How? The process by which UnCSS removes the unused rules is as follows:
The HTML files are loaded by PhantomJS and JavaScript is executed.
Used stylesheets are extracted from the resulting HTML.
The stylesheets are concatenated and the rules are parsed by css-parse.
document.querySelector filters out selectors that are not found in the HTML files.
The remaining rules are converted back to CSS.
So yes, it removes selectors not in the DOM at runtime. If you have dynamically added selectors, you can make uncss ignore them by commenting: /* uncss:ignore */ before them, e.g...
MAKE SURE YOU ADD THE MEDIA OPTION IN UNCSS
REF: SO-Answer-Deksden
SASS Background research:
Summarising above:
nex3: one of the core leads for sass, has been at google and working on dart. They released dart-sass (unstable release) as a rewrite in favour to replace and improve upon ruby sass. This is interesting as this rewrite also explains the lack of feature development in Ruby Sass as well as the need for a rewrite. Since a core contributor of a ruby sass port: i.e. libsass (C++ implementation of ruby-sass) left the libsass team, it brings a further impetus to improve on sass performance.
Credit:
Joesph
Deksden
In a Meteor (nodejs) project we use the less CSS preprocessor, and we use 3rd party "bootstrap-full.less" for our css styling.
There is one (maybe more) CSS rule in bootstrap that I would like to nuke, because it conditionally overrides other rules. (details below)
However, I don't want to "hack" the original bootstrap file, cause that is "vendor code".
I know I could re-override the CSS rules, but this is more work and hassle.
So the question is:
Is it possible to manipulate/process the parsed css rules in less before the actual css is generated?
In particular, there is this rule here,
#media (max-width: 767px) {
...
// Make all grid-sized elements block level again
[class*="span"],
.row-fluid [class*="span"] {
float: none;
display: block;
width: auto;
margin-left: 0;
}
which is undesirable in my case, because we only have this on a sidebar, that keeps the same width even on mobile. So it should continue to behave like a table with cells (span1, span2 etc) being floated.
Ok, maybe I will figure out a different solution for my CSS / bootstrap problem, but still it would be interesting to know if less allows me to manipulate the css it produces.
What I've done in my project is create a master .less file and within that file import my third party less files and then following that my custom files. Any classes that you want to update, create a dupe .less file with that class in it in your own directory and then simply edit the properties you want to change in your files. So for example:
master.less
#import "/static/bootstrap/less/bootstrap.less";
// My custom files
#import "scaffolding.less";
#import "type.less";
And then you have your own file called
type.less
h6{
color: #myCustomColor;
}
This way you keep all the bootstrap files intact and only overwrite what you need to. It also keeps the files nicely seperated so it's easy to navigate and also a snap if you ever need to update the bootstrap source.
Let's say I have about 10 css files on my site. I wanted to combine them into one. But when I combining them(just "concatenating" files, in order they are included into html), my style/layout breaks. It's not the problem of paths or something, just selectors doesn't work as before.
Am I missing something, or maybe my file is too big? What could be the problem? I thought there is no difference if styles are in one file or many(they shouldn't be) as long as order is preserved...
Cheers
Make sure you don't have #import directives in your files. According to CSS spec, it may be place only before other rules. All other imports are ignored.
For example:
1.css:
BODY {background: #fff; }
2.css:
#import "foobar.css";
1+2.css:
BODY {background: #fff; }
#import "foobar.css"; /* This import won't work. */