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. */
Related
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'd like the css file produced by the less compiler to contain an #import directive at the beginning of the file.
I.e. given this less file:
#import "external.css" /* this import directive should be left as is */
#import "globals.less"
a { color: #linkColor; } /* defined in globals.less */
the resulting CSS file should look like this:
#import "external.css"
a { color: #00a; }
It seems that none of the various options of the less import directive helps producing this. Is there any other way?
Update: I'm using gulp-less to compile the less files. It might be a problem with that package and not with less itself (#import (css) "external.css"; doesn't give the desired result).
Update: It does seem to be a gulp-less problem (or some other library in the chain) because the code in question should actually output the #import statement as-is even without using the (css) option. The Less compiler seems to be capable of reading the file extension and if it is css then it just leaves the #import directive as-is. So, this should definitely not be a Less compiler issue.
Yes, try using the css keyword like #import (css) "external.css";. When this keyword is used, the Less compiler would output the import statement as-is.
#import (css) "external.css";
#import "globals.less";
a {
color: #linkColor;
}
would compile to
#import "external.css";
a {
color: #00a;
}
As seven-phases-max guessed (in the comments), this issue was not caused by gulp-less, but by the css-minifier (gulp-clean-css) which ran after the gulp compilation.
Using the correct clean-css options (processImport: false) solves the problem.
I'm using Google Fonts, and have imported it in less. Here is my code:
main.less
#container {
#import url(http://fonts.googleapis.com/css?family=Raleway:300);
.like {
font-family: 'Raleway', sans-serif;
}
}
This doesn't work. but if I put #import url(http://fonts.googleapis.com/css?family=Raleway:300); before #container, it does.
I'm guessing this maybe because of path, but I don't know why. How do I fix this?
"Your #imports must come before all other content in your CSS. And I mean all of your content. Even putting comments before the #import tag will cause your imports to fail. So be sure to do your imports before you do anything else." - http://www.cssnewbie.com/css-import-rule/#.UtNj1PQmnn8
Direct from W3C:
"Any #import rules must precede all other at-rules and style rules in a style sheet (besides #charset, which must be the first thing in the style sheet if it exists), or else the #import rule is invalid." - http://www.w3.org/TR/css3-cascade/#at-import
Here's a fiddle: http://jsfiddle.net/setek/5QsvU/
This demonstrates that when #import is not the first line of a stylesheet/embed, it does not work. Try putting the #import first line, you can see what happens:
#sidebar a { color: #f00; }
#import url('http://jsfiddle.net/css/screen.css?jobofferinsidebar');
vs. just having:
#import url('http://jsfiddle.net/css/screen.css?jobofferinsidebar');
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.
I really like the idea and the concept of LESS. Yet I stumbled upon a bug, which i reported quite a while ago to the author but did not yet get any feedback. Maybe it's just me who is doing something wrong.
My application.less-File that looks similar to this:
#import "reset";
#import "config";
#import "header";
#import "forms";
[…]
I like that it is possible to use the #import rule to split up my files to gain a better overview of my css-declarations. Yet every imported file needs to re-import the config.less-File again to be able to make use of the mixins and variables i defined in there.
I bet you already know about what kind of redundancy I am driving at: Everytime the config.less is imported, its "output" becomes part of the application.css.
My config-file contains about 200 lines of code. Since I split up my CSS-into about 5 files (based on my controller names) that need to re-import the config, I end up having about 1000 lines of generated CSS-Code that are 100% redundant.
Only solution that I can come up with is not to split up my files, what I really like to avoid.
Although not ideal, the practical reason for this is that the files you import theoretically don't need to contain any CSS. Typically, you would have variables and dynamic mixins, which don't contribute to your CSS output:
lib.less:
#colors {
#blue: #0011ff;
#red: #ee2222;
}
.button (#width: 10px) {...}
main.less:
#import "lib";
a { color: #colors[#blue]; }
output, main.css:
a { color: #0011ff; }
#colors {} and .button will not be output in this case.
LESS now supports #import-once "stylename.less";
Maybe you can split them up in your development environment and then merge them together, not needing all the extra code, when you deploy to your live web server?
You can use dynamic mixins in your LESS config file if they are declared and mixed-in using $ instead of ..
In config.less:
$mixin
{
a { color: #light; }
h2 { //etc.
}
In header.less:
#import "config";
.header
{
$mixin;
}
Source. I've also tried this and it works.