Can't get dotLESS #import working - css

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.

Related

Grunt - remove styles from x.css which already exist in y.css

I'm wondering if there's a grunt plugin that can compare two files and remove duplicates from one of them.
Example: if both blog.css and main.css contain the rule .button { color: red; } I'd like to remove that rule from blog.css. (main.css should always remain unchaged)
Background:
I've got two LESS-bundles, main.less and blog.less, which I compile into main.css and blog.css
The idea is that my site should load main.css on every page. On blog pages I'll load both both main.css and blog.css.
The problem is that these LESS-files share a few "utility"-files (with variables, mixins and some common classes like .button)
So I end up with blog.css containing duplicates of some rules which are already defined in main.css, and I'd like to get rid of those duplicates to reduce file size.
Found it
https://www.npmjs.com/package/grunt-csscss
csscss: {
dist: {
src: ['css/x.css', 'css/y.css']
}
}
Allthough in my case the solution was actually much simpler. Turns out LESS now has import ("reference") which will import a file to use as a dependency only, without outputting any of it's css.
So now I can use import ("reference") commonstuff.less in blog.less and thus none of the styles from commonstuff.less will be output to blog.css! :)

Is there a way to tell less-css/gulp-less to leave an #import rule as-is

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.

How to reference global variables in modular LESS files?

How can I reference a variable defined in a central variables.less file in an individual module.less file, when the module does not directly reference variables.less?
Here's the structure of my Styles folder:
Styles
_variables.less
Site.less
Modules
_forms.less
_navbar-top.less
_panels.less
_titlebar.less
Modules.less
Pages
_page1.less
_page2.less
Pages.less
The file Site.less basically looks like this:
#import "_variables.less";
#import "Modules/Modules.less";
#import "Pages/Pages.less";
(it only includes capitalized LESS files)
And Modules.less looks like:
#import "_forms.less";
#import "_navbar-top.less";
#import "_panels.less";
#import "_titlebar.less";
(it only includes underscore-prefixed files in the same folder)
Pages.less is structured the same way.
What I want to do is have the following in the Modules/_panels.less file:
.panel-form {
.panel-variant(1px; #text-color; #component-default-bg; 1px);
border-top: solid darken(#component-default-bg, 1px);
border-bottom: solid darken(#component-default-bg, 1px);
border-left: none;
border-right: none;
}
But of course my LESS compiler (Visual Studio Web Essentials 2013.5) is throwing an error and refusing to compile the file _panels.less because it is referencing a variable that does not exist in its scope.
Currently my workaround is to declare .panel-form in Site.css but that is a hack -- I don't want to start declaring an arbitrary number of modules there.
Is it possible to reference a variable like this and still compile to CSS, and if so how? If not, is there a better structure I should use?
Incidentally I noticed that the LESS compiler doesn't like Bootstrap either, because it raises errors if I type a single space into a Bootstrap LESS file e.g. navbar.less and try to save it, reporting that (for navbar.less) the mixin .clearfix() is undefined. Which of course it is, because navbar.less does not reference mixins.less, yet if it can compile from bootstrap.less downward then everything will work just fine...
I don't know what is your environment but with triple slash directives it usually works:
root
less
_vars.less
modules
someModule.less
Inside "someModule.less" you should try this:
/// <reference path="../_variables.less" />

Import css/scss file into a class

I have a problem. I'm using vaadin inside liferay. I've successfully written a fully responsive (yeah, tables too) theme for vaadin, based on bootstrap. Now I'm importing it to liferay. Everything went fine 'till I needed to upgrade Liferay, where their new responsive theme is using same classes name as bootstrap, but with different behaviour (sad, very sad face).
The solution I've thought so far is to apply a class to the vaadin compiled css, like:
.daVaadinTheme {
#import bootstrap.css;
}
so the content will be compiled like:
.daVaadinTheme h1.insideTheFile{
}
.daVaadinTheme h2.insideTheFile{
}
But, as you may figured out, is not obviously working.
Do you have any solution?
Read carefully! This is NOT a duplicate of the answer you've posted. I'm trying to import a CSS file inside a CSS/SCSS class of another file, like the example I've written above. My problem is not to simply import a CSS file inside another one...
SOLUTION: (kudos to Mathias Jørgensen)
using #import from another scss file:
in test.scss:
.daVaadinTheme{
#import "bootstrap.scss";
}
Name your inner file with an underscore, and ending in scss. .Yes, even if it's plain css, i.e. foo.css → _foo.scss
Have an outer File like so:
#main .content { // if that's, where you want them to rule only
#import 'foo';
}
Reasons:
import only works with scss
underscore-files are glady skipped by sass (also as in gulp.src(<some wildcards).sass())
if you have no influence in your repo about the css filename whatsoever. or it's a major pain on upgrades, consider using a symbolic link under an .scss extension...
You need move your code into mixin:
// botstrap.scss
#mixin bootstrap {
h1.insideTheFile{
}
h2.insideTheFile{
}
}
Then, you can import normal:
// test.scss
#import "bootstrap"; // No extension
#include bootstrap; // The name of "mixin"
or with context:
// test.scss
#import "bootstrap"; // No extension
.daVaadinTheme {
#include bootstrap; // The name of "mixin"
}
If you want to add certain styles to a class using sass/scss I think what you're looking for is
.myClass { #import bootstrap.css; }

CSS breaks when packed

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. */

Resources