45

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?

daotoad
  • 26,689
  • 7
  • 59
  • 100
osherdo
  • 558
  • 1
  • 7
  • 14

6 Answers6

49

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.

iSkore
  • 7,394
  • 3
  • 34
  • 59
Mertcan Diken
  • 14,483
  • 2
  • 26
  • 33
  • 2
    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. – osherdo Aug 02 '16 at 13:42
  • 2
    You need to precompile your sass folder to css folder then include your compiled css to your page. – Mertcan Diken Aug 03 '16 at 07:22
10

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

Wim Mertens
  • 1,780
  • 3
  • 20
  • 31
  • 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. – osherdo Aug 01 '16 at 23:51
  • and both files are in the same directory? – Wim Mertens Aug 01 '16 at 23:56
  • updated my answer, check if your partial starts with an underscore – Wim Mertens Aug 01 '16 at 23:59
  • 1
    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 – Bikas Aug 02 '16 at 00:01
  • True, but you'd like to have all scss compiled in one css file – Wim Mertens Aug 02 '16 at 00:01
  • Still does not apply to my view. Even though no erros are thrown during compiling to .css file. – osherdo Aug 02 '16 at 11:37
  • Then you might have a different issue. You sure your scss doesn't have any mistakes? – Wim Mertens Aug 02 '16 at 12:11
  • 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? – osherdo Aug 02 '16 at 12:48
  • Issue with gulp. See here for more info: https://github.com/dlmanning/gulp-sass/issues/1 – Wim Mertens Aug 02 '16 at 21:28
9

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.

Anoop Singh
  • 121
  • 1
  • 6
  • 2
    @osherdo 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](https://sass-lang.com/documentation/at-rules/import) – Market May 26 '21 at 15:51
2

@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.

enter image description here

Anoop Singh
  • 121
  • 1
  • 6
0

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.

osherdo
  • 558
  • 1
  • 7
  • 14
0

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.

Tyler2P
  • 2,324
  • 26
  • 22
  • 31
SIR_EBI
  • 1