Import regular CSS file in SCSS file

Question

Is there anyway to import a regular CSS file with Sass s  import command  While I m not using all of the SCSS syntax from sass  I do still enjoy it s combining compressing features  and would like to be able to use it without renaming all of my files to   scss

User · Answer

You must prepend an underscore to the css file to be included, and switch its extension to scss (ex: _yourfile.scss). Then you just have to call it this way:

@import "yourfile";

And it will include the contents of the file, instead of using the CSS standard @import directive.

User · Answer

After having the same issue  I got confused with all the answers here and the comments over the repository of sass in github   I just want to point out that as December 2014  this issue has been resolved  It is now possible to import css files directly into your sass file  The following PR in github solves the issue    The syntax is the same as now -  import  your path to the file   without an extension after the file name  This will import your file directly  If you append   css at the end  it will translate into the css rule  import url        In case you are using some of the  fancy  new module bundlers such as webpack  you will probably need to use use   in the beginning of the path  So  if you want to import the following path node modules bootstrap src core scss you would write something like  import   bootstrap src core    NOTE   It appears this isn t working for everybody  If your interpreter is based on libsass it should be working fine  checkout this   I ve tested using  import on node-sass and it s working fine  Unfortunately this works and doesn t work on some ruby instances

User · Answer

You can use a third-party importer to customise  import semantics    node-sass-import-once  which works with node-sass  for Node js  can inline import CSS files   Example of direct usage   var sass   require  node-sass         importOnce   require  node-sass-import-once     sass render     file   input scss     importer  importOnce    importOnce        css  true            Example grunt-sass config   var importOnce   require  node-sass-import-once    grunt loadNpmTasks  grunt-sass     grunt initConfig     sass        options          sourceMap  true        importer  importOnce            dev          files             dist style css    scss      scss                        Note that node-sass-import-once cannot currently import Sass partials without an explicit leading underscore  For example with the file partials  partial scss     import partials  partial scss succeeds  import   partials partial scss fails   In general  be aware that a custom importer could change any import semantics  Read the docs before you start using it

User · Answer

This was implemented and merged starting from version 3 2  pull  754 merged on 2 Jan 2015 for libsass  issues originaly were defined here  sass 193  556  libsass 318    To cut the long story short  the syntax in next    to import  include  the raw CSS-file the syntax is without  css extension at the end  results in actual read of partial s ac ss css and include of it inline to SCSS SASS     import  path to file   to import the CSS-file in a traditional way syntax goes in traditional way  with  css extension at the end  results to  import url  path to file css    in your compiled CSS     import  path to file css     And it is damn good  this syntax is elegant and laconic  plus backward compatible  It works excellently with libsass and node-sass       To avoid further speculations in comments  writing this explicitly  Ruby based Sass still has this feature unimplemented after 7 years of discussions  By the time of writing this answer  it s promised that in 4 0 there will be a simple way to accomplish this  probably with the help of  use  It seems there will be an implementation very soon  the new  planned   Proposal Accepted  tag was assigned for the issue  556 and the new  use feature   answer might be updated  as soon as something changes

User · Answer

If you have a  css file which you don t wish to modify  neither change its extension to  scss  e g  this file is from a forked project you don t maintain   you can always create a symlink and then import it into your  scss   Creates a symlink   ln -s path to css file css path to sass files  file scss   Imports symlink file into a target  scss    import  path to sass files file     Your target output  css file is going to hold contents from imported symlink  scss file  not a CSS import rule  mentioned by  yaz with highest comment votes   And you don t have duplicated files with different extensions  what means any update made inside initial  css file immediately gets imported into your target output      Symbolic link  also symlink or soft link  is a special type of file   that contains a reference to another file in the form of an absolute   or relative path and that affects pathname resolution        http   en wikipedia org wiki Symbolic link

User · Answer

I can confirm this works   class CSSImporter  lt  Sass  Importers  Filesystem   def extensions     super merge  css    gt   scss    end end  view context   ActionView  Base new css   Sass  Engine new    template    syntax       scss    cache       false    load paths  Rails application assets paths    read cache  false    filesystem importer  CSSImporter   Relevant option     sprockets         context      view context      environment  Rails application assets       render   Credit to Chriss Epstein  https   github com sass sass issues 193

User · Answer

I figured out an elegant  Rails-like way to do it   First  rename your  scss file to  scss erb  then use syntax like this  example for highlight js-rails4 gem CSS asset     import   lt    asset path  highlight js github     gt      Why you can t host the file directly via SCSS   Doing an  import in SCSS works fine for CSS files as long as you explicitly use the full path one way or another   In development mode  rails s serves assets without compiling them  so a path like this works      import  highlight js github css        because the hosted path is literally  assets highlight js github css   If you right-click on the page and  view source   then click on the link for the stylesheet with the above  import  you ll see a line in there that looks like    import url highlight js github css     The SCSS engine translates  highlight js github css  to url highlight js github css    This will work swimmingly until you decide to try running it in production where assets are precompiled have a hash injected into the file name   The SCSS file will still resolve to a static  assets highlight js github css that was not precompiled and doesn t exist in production   How this solution works   Firstly  by moving the  scss file to  scss erb  we have effectively turned the SCSS into a template for Rails   Now  whenever we use  lt          gt  template tags  the Rails template processor will replace these snippets with the output of the code  just like any other template    Stating asset path  highlight js github   in the  scss erb file does two things    Triggers the rake assets precompile task to precompile the appropriate CSS file  Generates a URL that appropriately reflects the asset regardless of the Rails environment    This also means that the SCSS engine isn t even parsing the CSS file  it s just hosting a link to it   So there s no hokey monkey patches or gross workarounds   We re serving a CSS asset via SCSS as intended  and using a URL to said CSS asset as Rails intended   Sweet

User · Answer

Simple    import  path to file css

User · Answer

Good news everyone  Chris Eppstein created a compass plugin with inline css import functionality   https   github com chriseppstein sass-css-importer  Now  importing a CSS file is as easy as     import  CSS library some css file

User · Answer

If I am correct css is compatible with scss so you can change the extension of a css to scss and it should continue to work  Once you change the extension you can import it and it will be included in the file   If you don t do that sass will use the css  import which is something you don t want

User · Answer

Looks like this is unimplemented  as of the time of this writing   https   github com sass sass issues 193   For libsass  C C   implementation   import works for   css the same way as for   scss files - just omit the extension    import  path to file     This will import path to file css   See this answer for further details   See this answer for Ruby implementation  sass gem

User · Answer

Simple workaround   All  or nearly all css file can be also interpreted as if it would be scss  It also enables to import them inside a block  Rename the css to scss  and import it so   In my actual configuration I do the following   First I copy the  css file into a temporary one  this time with  scss extension  Grunt example config   copy        dev            files                                  src   node modules some module some precompiled css                   dest   target resources some module styles scss                                    Then you can import the  scss file from your parent scss  in my example  it is even imported into a block    my-selector      import  target resources some module styles scss        other rules        Note  this could be dangerous  because it will effectively result that the css will be parsed multiple times  Check your original css for that it contains any scss-interpretable artifact  it is improbable  but if it happen  the result will be hard to debug and dangerous

User · Answer

It is now possible using    import  CSS directory filename css

[css] Import regular CSS file in SCSS file?

Examples related to css

Examples related to sass