问题描述:

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?

网友答案:

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

网友答案:

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.

网友答案:

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.

相关阅读:
Top