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.