web-dev-qa-db-fra.com

Inclure le fichier `.scss` dans un autre fichier` .scss`?

Comment inclure le fichier .scss dans un autre fichier .scss? J'essayais de l'écrire dans un fichier: 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 */

et cela retourne une erreur: invalid css after @import

J'essaie d'inclure 2 autres fichiers scss dans le fichier scss principal, afin que tout soit ensuite compilé dans un fichier css. Comment est-ce possible?

sassscss-lint
17
osherdo

Vous pouvez l'importer comme ceci;

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

@import "../_mixins";

@import "_main";

@import "_login";

@import "_exception";

@import "_utils";

@import "_dashboard";

@import "_landing";

Selon vos annuaires et il fera ce que vous voulez.

18
Mertcan Diken

Vous pouvez inclure un partiel en faisant ceci:

@import "partial";

Le fichier importé nécessite un trait de soulignement. Sass le reconnaîtra donc: _partial.scss

5
Wim Mertens

Ok, il semble donc que mon fichier app.scss entre en collision avec le fichier Bootstrap.css ..__ parce que je voulais que la propriété app.scssbackground s'applique, au lieu du fichier css bootstrap. J'ai ajouté !important dans cette propriété pour remplacer le style bootstrap.

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

De plus, gulpfile.js a été mis à jour pour répondre à mes besoins en conséquence:

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'
    ]);
 });

Et c'est comme ça que je l'ai réparé.

0
osherdo