Import regular CSS file in SCSS file?

scss import variables
import css file in scss
scss import path
scss import css file from node_modules
import scss in html
import css in scss webpack
sass
scss to css

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

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)

Sass: @import, the syntax is without .css extension at the end (results in actual read of partial and include of it inline to SCSS/SASS): @import “path/to/file”;� to import (include) the raw CSS-file. the syntax is without .css extension at the end (results in actual read of partial and include of it inline to SCSS/SASS): @import “path/to/file”;

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.

Import regular css file in scss file? | by Vu Nam Hung, With SASS and Compass, all the imported SCSS and SASS files can be compressed and merged into a single CSS output file. What about the regular CSS files� @import filename ; Tip: You do not need to specify a file extension, Sass automatically assumes that you mean a.sass or.scss file. You can also import CSS files. The @import directive imports the file and any variables or mixins defined in the imported file can then be used in the main file.

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.

answer might be updated, as soon as something changes.

Compile imported regular CSS file in SCSS file to SASS @import rule, However, the Sass @import directive includes the file in the CSS; so no extra Let's look at an example: Let's assume we have a reset file called "reset.scss", that It is normal to add the @import directive at the top of a file; this way its content� Anything you can do in CSS you can do in Sass, and that includes using the @import directive. But as you've probably come to expect, Sass extends @import in some useful ways. To start with, it supports inclusion of .sass and .scss files. The basic syntax is the same:

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.

Sass @import and Partials, node-sass file.scss --import-css true Extensionless paths are not supported in regular CSS, so it does not override any existing CSS syntax. At that point, you might want to consider splitting your style sheet up into several smaller CSS files. That’s when the @import rule can come in quite handy. The @import rule is another way of loading a CSS file. You can use it in two ways. The simplest is within the header of your document, like so: <style> @import url('/css/styles.css

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"

Including .css files with @import is non-standard behaviour which , Ive been having issues trying to import scss into my css. Im using atom as my handler and ive tried downloading their plugins but they dont� In addition to importing.sass and.scss files, Sass can import plain old.css files. The only rule is that the import must not explicitly include the.css extension, because that’s used to indicate a plain CSS @import.

How do i import scss code into css file? - HTML-CSS, When I first started using Sass, there was one thing that drove me crazy about it compared to Less. For some reason, including a plain CSS file� Yes, if you want to use any .scss file code in any component.scss, they have to be imported in that component.scss. Issue. ~ (Tilda) has stopped working since Angular6. Issue. Use ~src instead to import scss.

Importing Plain CSS Files with Sass/SCSS � A Beautiful Site, With SASS and Compass, all the imported SCSS and SASS files can be compressed and merged into a single CSS output file. What about the regular CSS files� Usually it's used to import CSS fragments or files and not fonts. Try this workaround if you are using Ruby SASS/SCSS and try without brackets.

Im importing regular CSS file in SCSS file, but?, libs/bootstrap-select"; norm, but DEPRECATION WARNING on line 1, column 8 of /libsass/test.scss: Including .css files with #import is non-standard behaviour� How to Import Google Fonts in CSS File. An essential part of any design is the chosen font. Google Fonts is a free service of web fonts that allows us to use a large variety of fonts in our CSS file.

Comments
  • Yes, there is a way: just remove '.css' extension in css file path in @input statement :) (works for sass version >=3.2)
  • 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.
  • @kleinfreund not true with Sass 3.3.1. The @import statement is not changed at all and appears in the resulting CSS file, Sass doesn't include the referenced CSS file like @GSto is asking. It looks like it will be implemented in Sass 3.4 or 4.0
  • If you're using Gulp or Grunt, just use a different tool to import your CSS files, it's easier and it works now. I use gulp-import-css, I'm not sure what's the Grunt equivalent.
  • It works with libsass at least. See the answer stackoverflow.com/questions/7111610/… and PR github.com/sass/libsass/pull/754
  • "Import works for *.css the same way as for *.css files" is a tautology. You meant for one of those to be *.scss, right?
  • Starting in v3.5.3, libsass warns that this is non-standard behavior and should not be relied upon. (Instead "Use a custom importer to maintain this behaviour.") github.com/sass/libsass/releases/tag/3.5.3
  • 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?
  • 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)
  • 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 :(
  • ruby -v : ruby 2.2.2p95 (2015-04-13 revision 50295) [x64-mingw32] sass -v : Sass 3.4.17 (Selective Steve) not working here
  • Thank you for this! I was able to import normalize.css using node-sass with @import "node_modules/normalize.css/normalize";
  • just to clarify, importing the css as sass worked like this for me: @import url("path/to/file-without-css-extension");
  • 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.