I am dealing with a CSS stylesheet generated from source written in less source code. The source includes the line:
#import url('http://fonts.googleapis.com/css?family=Droid+Serif');
lessc 1.1.0 (LESS Compiler) [JavaScript]
This is a perfectly fine bit of CSS. However my version of lessc (lessc 1.1.0 (LESS Compiler) [JavaScript]) sees that the filename doesn't end in .css and tries to find a local .less file to include. Resulting in the error
file 'http://fonts.googleapis.com/css?family=Droid+Serif' wasn't found.
Is there any way around this? E.g. by forcing lessc to pass-through a section of text literally?
Check out this issue on less.js Github
The solution seems to be:
add &.css before close url import
from
#import url("http://fonts.googleapis.com/css?family=Open+Sans");
to
#import url("http://fonts.googleapis.com/css?family=Open+Sans&.css");
Let me know if it works, I remember opening a ticket months ago about the exact same issue but gave up.
Related
In Wordpress, my main style.css file imports various sub-files, such as content.css, archive.css, product.css and so on:
#import url("content.css");
#import url("archive.css");
#import url("product.css");
Without success have I have been looking for a way - through browser console or online resource - to download "in a shot" a single CSS containing style.css plus all related #import files, without having to copy and paste all of them in a new file.
Do you know if there is a solution for this? Thank you.
You could use a CSS pre-processor such as LESS or Sass (SCSS), they come with many other features as well.
Depending on the editor you already use you might be able so simply install a package (like Easy LESS for Visual Studio Code), rename your style.css to style.less and be done.
Choosing and switching to a CSS pre-processor might however, depending on your circumstances, environment and experience, not be easy or straightforward at all.
I'd suggest just to copy paste them your css files into one. Using a tool for a simple task as this one can only result in bugs.
Today I discovered less stylesheet and egor to learn it.
But i am confuses it is showing inside inspect element Internel Server error 500 in linking less.
I first install it via command in nuget console
ie
PM -> install-package dotless
and then relate the stylesheet in my header content like
<link rel="stylesheet" type="text/less"
href="Content/style.less" />
Is this correct way? If not help required.
The style you used is only recommended for debugging. You need to add the style.js script to your site, like below. You may also need to make sure your server is configured to serve .less files by adding the MIME type to your site configuration.
<script src="less.js" type="text/javascript"></script>
But no, that is not the correct way for production use. Your browser has no idea what LESS is. Your browser understands CSS only. For test purposes, less.js is able to convert .less files into a usable form, but it's not recommended for production use.
Instead, the point of LESS is that it compiles to CSS. Then you provide that CSS as your stylesheet in the traditional way. The LESS documentation should help you out. As a quick example, here's how you'd compile LESS to CSS.
lessc styles.less > styles.css
In the above command, lessc is the compiler program. styles.less is your LESS sheet being passed to the compiler. The output would normally go to STD OUT and you'd see it in the console, but since we included > styles.css we're redirecting that STD OUT into a text file called styles.css.
Is there any program similar to app.less for linux? I want to keep comments that I have in the less files transferred the compiled css files. If not, is there a command line that I could use using the lessc command in linux?
The problem is that whenever I run the lessc command on my less files, I get a minified version css that throws away all my comments. I want the comments to help me debug as well as it being non-minified.
Lessc compilers default is not to minify, but you can always check the commands help (lessc -h).
Also, in less you can use two types of comments the normal css style comments:
/* This is a CSS comment */
And these will be "printed" on the output css file.
The other style of comment is like single line comments in many languages:
// This is a LessCSS comment
And these do not get "printed" on the output css file.
Hope this helps!
Out of nowhere, all of my stylesheets started throwing errors during compilation.
lessc static/css/styles.less
/gems/less-2.2.1/lib/less/js/lib/less/parser.js:385:31: .rounded_corners is undefined (Less::Error)
None of my mixins seem to be available in the main less file. The mixins.less file is imported at the very top of my stylesheet and is only imported once.
#import "mixins.less";
#import "reset.less";
#import "clearfix.less";
#import etc..
I've also checked each file for a Byte Order Mark, inspired by Variable Name Error "is undefined" even though "variables.less" imported, and even went back 4 weeks in this project's git history (where I'm 100% sure compilation ran successfully). I have had no luck thus far.
Oddly enough, compilation runs successfully using SimpLESS and Less Compiler for Mac.
I've narrowed this down to an importing issue because if I attempt to use a mixin at the top of the stylesheet and error is thrown with that mixin's name.
Anyone familiar with this situation?
I'm using version 2.2.1 of the Less Ruby Gem.
I think you need to be in the directory that contains the file you are trying to compile. Instead of running the command as:
lessc static/css/styles.less
try:
cd static/css
lessc styles.less
This question already has answers here:
Import regular CSS file in SCSS file?
(15 answers)
Closed 7 years ago.
I can use Sass to compile multiple .SCSS or .SASS input files into a single .CSS output file using #import as described here.
If I use #import to include normal .CSS files, they are not merged. The output .CSS file still contains the #import directives. That makes sense.
But is there a way I can override this behavior, perhaps a command-line switch to the Sass compiler? In other words, can I tell Sass to attempt to forcibly merge #import "foo.css"; just as if it were a .SCSS file?
I'm using a third-party library (Google Closure Library) with many .CSS files. I'm only using a few of these in my project. I'd rather avoid manual solutions such as renaming all these files as .SCSS (although this seems to work) or copying and pasting their contents into my .SCSS file (also works). And I don't want to serve them all to be imported on the client-side. I'd really just like Sass to include the few .CSS files that I use 'as is' and produce a single output stylesheet. Possible? Are there any other tools I should look at?
every CSS file is a valid SCSS too.. so if you change the files you need "invisibly" imported or merged to _filename.scss then #import from the main scss file using #import "filename"; (extension optional) it should compile to one big CSS with no #import statements inside it
edited to add: sorry just saw your edit after a browser crash.. and see it's not what you're looking for, I don't know of another way
I haven't found a way to do this in Sass.
My workaround is to import third part libraries directly from their URLs. Of course this only works for CSS libraries that are served via URLs. It's still importing multiple files but at least I don't have to rename files and otherwise manage a modified copy of the vendor's CSS library.
Example:
// ORIGINAL: locally managed, modified copy (bad), no #import in output (good)
#import 'my_modified_copy/closure/goog/css/common.scss';
// WORKAROUND: vendor-managed (good): #import in output (bad but acceptable)
#import 'http://closure-library.googlecode.com/svn/trunk/closure/goog/css/tab.css';
Before release, I'll probably add a script to pull a current version from the vendor and rename all .css files as .scss files. But for now, the above workaround is acceptable for development.
This can be done server-side and save you a bit of hassle if that's an option. Since you're just merging the files together and since it's just CSS there shouldn't be any conflicts in the information that should harm your site. Also, this way gives you flexibility to make updates to the CSS as frameworks are improved.
Ruby is not my language of choice but still very viable to do everything needed here. There is a tool out there written in Ruby that will do this for you with CSS as well as JS files. Take a look at this blog post to get the rundown:
http://cjohansen.no/en/ruby/juicer_a_css_and_javascript_packaging_tool
I hope that this is helpful, and please let me know if you need anything else on this one.