Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Scss equivalent of Less: @import (inline) "my.css"

So I have file styles_manager.scss where I have a lot of sytles references and I want doo something like this inside this file:

@import (inline) "node_module/animate.css/animate.min.css"; 
@import "../common/bootstrap/config";
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
@import "../common/variables";
....

I will parse it by scss and get output.css . So I want to have animate.min.css body inside output .css.

In less this sis trivial - "(inline)" statement. How to import css file body into SCSS?

like image 905
Kamil Kiełczewski Avatar asked Jun 28 '16 19:06

Kamil Kiełczewski


People also ask

Is @import deprecated in Sass?

As of October 2021 @import will be deprecated, along with global built-in functions, and one year after that (no later than October 2022) @import support will be dropped. Make sure you go check out the newly refreshed Sass documentation for the latest updates.

Does SCSS replace CSS?

SASS won't ever replace CSS. CSS is the standard developed by the W3C, and the one browser makers follow (and sometimes advance) when building their browsers' rendering engines. However, SASS and other CSS pre-compilers like LESS and Stylus are making an impact on how people view the evolution of CSS.

Can you import LESS into SCSS?

No, that's not possible, because SASS and LESS aren't compatible with each other.


1 Answers

The answer is: remove '.css' extension in @input statement (this works for sass version >= 3.2). So example above should look like this:

@import "node_module/animate.css/animate.min"; 
@import "../common/bootstrap/config";
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
@import "../common/variables";
....

More theoretical and historical background of that topic you can find here (what was mention by @Lowkase in comments below question)

like image 85
Kamil Kiełczewski Avatar answered Oct 06 '22 03:10

Kamil Kiełczewski