Can I Import Regular CSS Files into SCSS Using `@import`?

Importing Regular CSS Files in SCSS with @import

Many developers find themselves desiring the combined and compressed features of SCSS without the requirement of renaming all their files to *.scss. To address this, the question arises: is it feasible to import regular CSS files into SCSS using the @import command?

Answer

Initially, this approach faced challenges, leading to confusion among the community. However, as of December 2014, the issue has been resolved through a GitHub pull request.

The updated syntax to import CSS files directly into SCSS is @import "your/path/to/the/file," without a file extension following the file name. This will import the file directly.

If the *.css extension is appended, it translates to the CSS rule @import url(...).

For module bundlers like webpack, it is recommended to use ~ at the start of the path. To import the file node_modules/bootstrap/src/core.scss, simply use @import "~bootstrap/src/core."

Important Note

It's worth noting that this solution may not work for everyone. If your interpreter is based on libsass, it should function as expected. On the other hand, it has been found to work with node-sass but may not function on certain ruby instances.

The above is the detailed content of Can I Import Regular CSS Files into SCSS Using `@import`?. For more information, please follow other related articles on the PHP Chinese website!