import css file into less file

Question

Can you import  css files into  less files      I m pretty familiar with less and use it for all my development  I regularly use a structure as follows    import  normalize      styles here   import  mixins    import  media-queries    import  print     All imports are other  less files and all works as it should   My current issue is this  I want to import a  css file into  less that references styles used in the  css file as follows    import     style css     small       font-size 60        type       other styles here   The  css file contains a class called  type but when I try to compile the  less file I get the error NameError   type is undefined   Will the  less file not import  css files  only other  less ones     Or am I referencing it wrong

User · Answer

Try this     import  lib css     From the Official Documentation       You can import both css and less files  Only less files import   statements are processed  css file import statements are kept as they   are  If you want to import a CSS file  and don   t want LESS to process   it  just use the  css extension      Source   http   lesscss org

User · Answer

I had to use the following with version 1 7 4   import  less   foo css    I know the accepted answer is  import  css   foo css  but it didn t work  If you want to reuse your css class in your new less file  you need to use  less  and not  css    Check the documentation

User · Answer

since 1 5 0 u can use the  inline  keyword   Example   import  inline   not-less-compatible css    You will use this when a CSS file may not be Less compatible  this is because although Less supports most known standards CSS  it does not support comments in some places and does not support all known CSS hacks without modifying the CSS  So you can use this to include the file in the output so that all CSS will be in one file    source  http   lesscss org features  import-directives-feature

User · Answer

If you want your CSS to be copied into the output without being processed  you can use the  inline  directive  e g     import  inline      timepicker jquery ui timepicker css

User · Answer

If you want to import a css file that should be treaded as less use this line    ie      import  less   ie css

User · Answer

You can force a file to be interpreted as a particular type by specifying an option  e g     import  css   lib     will output   import  lib     and   import  less   lib css     will import the lib css file and treat it as less  If you specify a file is less and do not include an extension  none will be added

User · Answer

Change the file extension of your css file to  less  You don t need to write any LESS in it  all CSS is valid LESS  except of the MS stuff that you have to escape  but that s another issue    Per Fractalf s answer this is fixed in v1 4 0

User · Answer

From the LESS website      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    As jitbit points out in the comments below  this is really only useful for development purposes  as you wouldn t want to have unnecessary  imports consuming precious bandwidth

User · Answer

If you just want to import a CSS-File as a Reference  e g  to use the classes in Mixins  but not include the whole CSS file in the result you can use  import  less reference   reference css     my less    import  less reference   reference css     my-class       background-color black        reference-class       color blue       reference css   reference-class      border  1px solid red       Result  my css  with lessc my less out my css     my-class     background-color  black    border  1px solid red    color  blue      I m using lessc 2 5 3

[css] import .css file into .less file

Examples related to css

Examples related to import

Examples related to less