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         


        

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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