587

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

2
  • 5
    Yes, there is a way: just remove '.css' extension in css file path in @input statement :) (works for sass version >=3.2) Apr 26, 2017 at 15:18
  • 1
    As of 2018, using SASS @import in a regular CSS file should just generate a regular CSS @import. That means one more HTTP request and no combining or compressing. If some implementations behave differently then I'd say it's a non-standard feature that diverges from the language spec. Nov 9, 2018 at 13:47

15 Answers 15

436

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.

16
  • 1
    This seems to be implemented in libsass but when using the ruby implementation of sass, it seems that this syntax works, but only if you have sass-css-importer required. At least that's what I'm seeing. Can anyone else confirm this?
    – bsara
    Jul 28, 2015 at 1:37
  • 6
    Are you sure you have the latest version of sass? I have been using this syntax for a while and it works fine with both ruby and nodejs interpreters. Have you checked if you're not placing an extension after the file name? The correct syntax is @import "path/to/style/file (without the .css extension)
    – tftd
    Jul 29, 2015 at 12:54
  • 4
    I'm using ruby sass v3.4.18 (with Jekyll) according to my Gemfile.lock. Still seeing Error: File to import not found or unreadable: cssdep/cssfile. If I create a cssdep/cssfile.scss it suddenly works. So not a path issue, for some reason I still can't include '.css' files from SASS :(
    – thom_nic
    Aug 31, 2015 at 15:06
  • 1
    ruby -v : ruby 2.2.2p95 (2015-04-13 revision 50295) [x64-mingw32] sass -v : Sass 3.4.17 (Selective Steve) not working here Sep 1, 2015 at 7:58
  • 5
    Thank you for this! I was able to import normalize.css using node-sass with @import "node_modules/normalize.css/normalize";
    – Nick
    Jan 7, 2016 at 18:38
289

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:

  1. 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";

  2. 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.

UPD: on 26 October 2020 lib-sass was deprecated, therefore issue #556 was immediately closed.

__

answer might be updated, as soon as something changes.

8
  • 4
    just to clarify, importing the css as sass worked like this for me: @import url("path/to/file-without-css-extension"); Apr 28, 2016 at 6:15
  • 1
    This doesn't actually work in the ruby-based version of sass. For example, the command: sass myFile.scss:output.css fails with a css import, but works when you change the .css file's extension to .scss. Run with the latest version as of the writing of this comment: 3.4.22 / Selective Steve. This also affects any task runners using the ruby version, like grunt-contrib-sass.
    – ansorensen
    Jun 21, 2016 at 23:14
  • @ansorensen, I think there's confusion from your side. What do you mean by "works when you change the .css file's extension to .scss"? The whole idea was exactly about regular CSS files, and two ways of working with them (don't confuse with importing SCSS). Please read one more time the question and the answer.
    – Farside
    Jun 21, 2016 at 23:44
  • 1
    @Farside No confusion. Import 'path/to/file' syntax doesn't work in the latest version of the sass gem in Ruby. When I run sass with an import, the import works successfully when the file at the path imported has an .scss extension and fails when the file has a .css. The question asks for an import of css into scss, and you provide an answer for lib-sass & node-sass. I'm commenting that this functionality is not in the ruby-based versions of sass.
    – ansorensen
    Jun 22, 2016 at 23:44
  • 1
    @ansorensen, omg, so many text from you... I was explicit, and don't confuse anyone. Node-sass is a Node.js library LibSass (the C version of Sass). Not a single mention that libsass or node-sass is Ruby based, not a single mention about RUBY version only in the original question. Please, read carefully, before writing 3 comments in a row next time. I have all the references: as per issue#193 it's still not implemented after 5 years of discussion for Ruby version, they promise this functionality only when ver. 4.0 will be available.
    – Farside
    Jun 28, 2016 at 14:47
275

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)

7
264

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.

9
  • Thank you! This works, but I found that I didn't need to pre-pend an underscore in order for it to work. Is there something that I'm missing with the underscore? Nov 5, 2012 at 20:13
  • 74
    The underscore is to prevent it from being compiled as a separate file.
    – Jonah
    Feb 25, 2013 at 22:23
  • 4
    In case anyone's wondering, this works because Sass' SCSS syntax is a superset of CSS3. That's also why the semicolon is needed.
    – Jacob Wan
    Sep 15, 2013 at 19:18
  • 49
    You can't change extension of some vendor CSS file for example. Apr 9, 2014 at 18:58
  • 7
    If it's on your computer/server you can! And there is also symbolic links if you wish not to.
    – ste
    Sep 15, 2014 at 22:04
42

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"
1
  • 3
    Fails due to using deprecated starting point. "What is, but can never be..." I'm sure it was great when it first came out, but it needs an update to function again, or you must install deprecated plugins. Thanks, C§
    – CSS
    Aug 20, 2015 at 21:10
18

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

4
  • 10
    Adding a symlink is not a very portable solution (i.e. multiple developers or build systems)
    – LocalPCGuy
    Dec 4, 2014 at 19:06
  • @LocalPCGuy it is, when both files (.css and created symlink) are available to everyone via a shared repository, for example. Dec 5, 2014 at 7:20
  • I just did this and was gonna answer about sym links on this thread, but glad it's already here! It's true that this need is rare, but my situation involved not wanting to modify the CSS file at all (because it was a bower file), so building a symlink and importing that worked perfectly. Jul 17, 2015 at 15:41
  • 2
    For Windows users, the same functionality would have a different syntax mklink /H <link> <target>, and it's called hard link @mrsafraz.
    – Farside
    Mar 22, 2016 at 22:49
5

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.

4

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.

1
  • 16
    unfortunately sometimes the imported css files are out of your control, as in a library which packages some static assets. Nov 26, 2011 at 0:09
2

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 "<%= asset_path("highlight_js/github") %>";

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 <%= ... %> 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:

  1. Triggers the rake assets:precompile task to precompile the appropriate CSS file.
  2. 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!

1
  • To me the solution seems a bit shady and sounds more like a hack. But it's a good job on investigation!
    – Farside
    Jul 28, 2016 at 12:11
2

To import a regular CSS file into Sass:

Official Sass Documentation: Import CSS into Sass

enter image description here

1

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).

1

to Import css file in to scss simply use the this: @import "src/your_file_path"; without using extension .css at the end

-3

It is now possible using:

@import 'CSS:directory/filename.css';
1
  • 4
    only if gem sass-css-importer is installed, sass is called with switch -r sass-css-importer and .css is omitted from the file path Sep 13, 2014 at 17:58
-5

I can confirm this works:

class CSSImporter < Sass::Importers::Filesystem
  def extensions
    super.merge('css' => :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

1
  • 2
    How can you use this in your scss file?
    – Adrian Ber
    Apr 7, 2016 at 19:37
-9

Simple.

@import "path/to/file.css";

2
  • 8
    I've tried this, but it wont pull the contents of the file into that one when compressing it, it will just keep the @import line.
    – GSto
    Aug 19, 2011 at 15:01
  • 1
    Lowest scored answer, but ironically, this seems to be the right way, now. Including the suffix is the right thing to do.
    – Wyck
    Nov 23, 2018 at 3:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.