Import regular CSS file in SCSS file?

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


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.


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.

链接地址: http://www.djcxy.com/p/63640.html

上一篇: 在Mac上的Netbeans SCSS格式化?

下一篇: 在SCSS文件中导入常规CSS文件?