Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Wish: @import process .CSS file as LESS file #303

Closed
grobakh opened this Issue · 11 comments

9 participants

Vladimir Dupelev Wayne Larsen jamie-pate tonyxiao Yaroslav Ulanovych Aslak Hellesøy Jon Schlinkert Matthew Dean Gaurav Ramanan
Vladimir Dupelev

You wrote:
"
If you want to import a CSS file, and don’t want LESS to process it, just use the .css extension:
@import "lib.css"; The directive will just be left as is, and end up in the CSS output.
"
I want LESS to process my .css with @import command. Reason: not to reconfigure MIME types by adding .less.
Today I need to comment test: // this.css = /css$/.test(this.path);

Maybe invent some special syntax
@import! "lib.css"
@import "lib.css" --less --once
@import "lib.css" -lo
to force .css processing?

BR
Vlad D.

Wayne Larsen

I'm not sure what you mean by "process my css". Either it's css and doesn't need processing, or it's a less file and does need processing.

However, perhaps you are getting at what I would like -- I would like to be able to include a css file inside a less file. This is useful for bundling the css into one file. Right now you need to rename the css file to .less so that the @import command will bundle them together. You end up losing meaning, if that file does not have any less commands in it.

I started working on an @include command that would simply add the css file 'as is' to the output. Perhaps that would work?

@include "reset.css"
@import "base"

jamie-pate

I've done this, see #315
you just have to rename your '.css' file '.less.css'

Vladimir Dupelev

Cool!

BR
Vlad D.

Vladimir Dupelev grobakh closed this
tonyxiao

Is there any way to inline css imports? It's not processing per se but rather concatenating.

jamie-pate

Not sure exactly what this would buy you, are you looking to include the variables you created in the imported file?

either way this sounds like a fresh support request, this one only deals with including more file types with the @import rule

Yaroslav Ulanovych

I have the same need. And not only me: http://stackoverflow.com/questions/11196915/import-css-file-into-less-file. I want to use some jquery ui styles in my less files. It's obvious that I can't rename jquery-ui.css because jquery ui gets broken than. And such thing doesn't work:

@import "jquery-ui/css/start/jquery-ui.css";
.my-style {
    .ui-icon; /*less doesn't know ui-icon*/
}

I believe that isn't hard to implement.

jamie-pate

@yaroslav-ulanovych: This sounds like a whole new feature (actually importing symbols from css)
vs concatenating css into a less file (which is what happens now)

This issue was merely a request to treat '.less.css' files exactly like '.less' files.

you could probably treat '.css' files like '.less' files to get this effect since less is a superset of css.

you could do this in your copy of the code by tweaking this line jamie-pate@c37bf80 in a slightly different way

Aslak Hellesøy

Here is how I worked around it:

#!/bin/bash
#
# This script renames renames all .css files under components to .less
# This is to work around less' inability to @include a .css file.
#
for file in `find components -type f -name "*.css"` ; do
  mv ${file} ${file%.css}.less
done
Jon Schlinkert

Less.js can import css files as of version 1.4.0:

@import (less) "styles.css";
Matthew Dean

Correct. This feature has been implemented. We can re-open issue if it's not working correctly with the beta.

Matthew Dean matthew-dean reopened this
Gaurav Ramanan

+1 !

javi santana javisantana referenced this issue from a commit in CartoDB/carto
Dane Springmeyer springmeyer fix #303 cfab4f6
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.