Include `.scss` file in another `.scss` file?

Question

How can I Include .scss file in another .scss file? I was trying to write this in a file: app.scss:

@include('buttons');
@include('dropzone');

body {

    background: $primaryColor;
    overflow-x: hidden; /*Clip the left/right edges of the content inside the <div> element - if it overflows the element's content area: */
    height: 100%; /* Cover all (100%) of the container for the body with its content */
    padding-top: 70px;
} /* more css code here */

and it returns an error : invalid css after @import

I try to include 2 other scss files inside the main scss file, so it will be all compiled to one css file eventually. How is it possible?

Repression

Answer 1

You can import it like this;

@import "../../_variables";

@import "../_mixins";

@import "_main";

@import "_login";

@import "_exception";

@import "_utils";

@import "_dashboard";

@import "_landing";

According to your directories and it will do what you want.

Elative

I did. And compilation with gulp does not throw any errors.The thing's that the style is not applied to the page at all. – Repression

You need to precompile your sass folder to css folder then include your compiled css to your page. – Elative

Answer 2

You can use @use rule for it. This rule loads another Sass file as a module, which means you can refer to its variables, mixins, and functions in your Sass file with a namespace based on the filename. Using a file will also include the CSS it generates in your compiled output!

// _base.scss
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

see how to using @use 'base'; in the styles.scss file

// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

you don't need to include the file extension.

Miracidium

@Repression Please promote this as the valid answer. Most of the ranked answers are out-of-date due to @import support. The Sass team discourages the continued use of the @import rule. Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely...source – Prologize

Answer 3

You can include a partial by doing this:

@import "partial";

The imported file needs an underscore, so sass will recognize it to be included: _partial.scss

Myer

thanks for that.It returns another error: gulp-notify: [Laravel Elixir] Sass Compilation Failed: resources/assets/sass/app.scss Error: @import directive requires a url or quoted path on line 4 of stdin >> @import('buttons'); ^ Tried to run both: ``` npm install -g gulp-sass and npm install gulp-sass ``` still getting the same error as above. – Repression

and both files are in the same directory? – Myer

updated my answer, check if your partial starts with an underscore – Myer

Just to point out _ is not a requirement. Sass ignores the _partials in output, but if provided without it, it'll create corresponding CSS for the partial as well – Ariew

True, but you'd like to have all scss compiled in one css file – Myer

Still does not apply to my view. Even though no erros are thrown during compiling to .css file. – Repression

Then you might have a different issue. You sure your scss doesn't have any mistakes? – Myer

I think it does not have since it is able to import all mixins, and also gulp does not throw an error when I am compling to css file. any other thing you think I can check on? – Repression

Issue with gulp. See here for more info: github.com/dlmanning/gulp-sass/issues/1 – Myer

Answer 4

@osherdo You have no need to add !important for overwriting bootstrap CSS.

body 
{
background: #4d94ff; /* Use to override Bootstrap css settings. */
}

First of you need to verify from where bootstrap is rendering on the page and what is the weight of the bootstrap CSS file. After that you can place your 'css/app.css' file after bootstrap then it will work. Then you can easily overwrite the entire bootstrap CSS.

Miracidium

Answer 5

Ok, so it appears to be that my app.scss file collide with Bootstrap.css file. Because I wanted the app.scss background property to apply, instead of the bootstrap css file. I've added !important in this property to override bootstrap style.:

body 
{
background: #4d94ff !important; /* Used to override Bootstrap css settings. */
}

Also, gulpfile.js has been updated to suite my needs accordingly:

var elixir = require('laravel-elixir');


elixir(function (mix) {
mix.sass('app.scss', 'resources/assets/css')
 .styles([
'app.css'
 ], 'public/css/app.css');
 mix.version([
   'css/app.css'
    ]);
 });

And that's how I fixed it.

Repression

Answer 6

You can use @forward() or @use and the name of the file you want to include should begin with a underscore, then the file doesn't get compiled to a css file. Only the file where you include the files should be compiled to a css file.

Pulpit