Import regular CSS file in SCSS file?

by

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.

More Related Contents:

  1. How to create color shades using CSS variables similar to darken() of Sass?
  2. How to dynamically generate a list of classes with commas separating them?
  3. SASS: randomly pick background-image from a list
  4. Is there a SASS.js? Something like LESS.js?
  5. Sass Invalid CSS Error: “expected expression”
  6. Dynamic Sass Variables
  7. Ampersand (&) at the end, and part of, a selector in SASS
  8. Customize Bootstrap 4’s grid-system Breakpoints
  9. How can one import only variables and mixins from Sass stylesheets?
  10. Have a variable in images path in Sass?
  11. Next.js Global CSS cannot be imported from files other than your Custom
  12. How to compile or convert sass / scss to css with node-sass (no Ruby)?
  13. What does ‘&.’ in ‘&.sub-title’ indicates in scss?
  14. CSS-Only Sticky Table Headers In Chrome
  15. SCSS extend a nested selector and override the nested rulesets
  16. Sass negative variable value?
  17. Sass @each with multiple variables
  18. SASS indented syntax on multiple lines?
  19. Placeholder Mixin SCSS/CSS
  20. Why put in front of the file name “_” or “_” in scss/css?
  21. Merging selectors from mixins
  22. How to control number of items per row using media queries in Flexbox?
  23. how to change bootstrap version 4 button color
  24. Text Stroke (-webkit-text-stroke) css Problem
  25. Pass function or mixin by reference in SASS
  26. SASS for loop updating hsla lightness returns error $lightness: “96.77419” is not a number for `hsla’
  27. Creating CSS3 Circles connected by lines
  28. How to properly introduce a light/dark mode in Bootstrap?
  29. How to combine and use multiple Next.js plugins
  30. SASS CSS: Target Parent Class from Child

Leave a Comment