mixin - sass import css

¿Incluir el archivo `.scss` en otro archivo`.scss`?

Question

¿Cómo puedo incluir .scss archivo .scss en otro archivo .scss ? Estaba intentando escribir esto en un archivo: 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 */

y devuelve un error: invalid css after @import

Intento incluir otros 2 archivos scss dentro del archivo scss principal, por lo que finalmente se compilará en un archivo css . ¿Como es posible?

Answer 1

Bien, parece que mi archivo app.scss choca con el archivo Bootstrap.css. Porque quería que se app.scss background propiedad de background app.scss , en lugar del archivo bootstrap css. He añadido !important en esta propiedad para anular el estilo de arranque:

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

Además, gulpfile.js se ha actualizado para satisfacer mis necesidades en consecuencia:

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

Y así es como lo arreglé.

Answer 2

Puedes importarlo de esta manera;

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

@import "../_mixins";

@import "_main";

@import "_login";

@import "_exception";

@import "_utils";

@import "_dashboard";

@import "_landing";

Según tus directorios y hará lo que quieras.

Answer 3

Puedes incluir un parcial haciendo esto:

@import "partial";

El archivo importado necesita un guión bajo, por lo que sass lo reconocerá para ser incluido: _partial.scss