grunt - sass compile scss

Cómo compilar varios archivos scss usando grunt-sass

Question

Estoy tratando de compilar múltiples archivos .scss en un solo archivo CSS. Esto realmente funciona, pero solo toma el primer archivo ...

sass: { // Task
dist: {
files: {
''css/test.css'':''sass/*.scss''
}
}
}

No tenemos instalado ruby, por lo que grunt-contrib-sass no es una opción. Hago lo mismo en Stylus así ...

stylus: {
compile : {
files : {
''css/g.css'' : ''stylus/*.styl''
}
}
}

Answer 1

¿Qué hay de ejecutar grunt-contrib-concat primero?

concat: {
dist: {
src: [
''sass/*.scss'',
],
dest: ''sass/build.scss'',
}
},
sass: { // Task
dist: {
files: {
''css/test.css'':''sass/build.scss''
}
}
}

y luego tarea:

grunt.registerTask(''sass'', [''concat'', ''sass'']);

editar

¿Cómo estás usando @import ? No soy un experto en los detalles, pero esto es lo que hago ...

dir /

main.scss
_nav.scss
_vars.scss
etc.

main.scss

@import "nav";
@import "vars";
etc.

Answer 2

Puedes usar "grunt-sass-globbing". Generará un archivo SCSS con todas las importaciones que especificó en su Gruntfile. https://www.npmjs.com/package/grunt-sass-globbing/

Con esta opción, puede conservar sus mapas de origen y no necesita concatenar sus archivos SCSS.

Paso 1: Crear archivo de importación

sass_globbing: {
your_target: {
options: {
useSingleQuotes: false,
signature: ''// Hello, World!''
},
files: {
''imports.scss'': ''partials/**/*.scss'',
}
}
}

Paso 2: compila tu archivo de importación

sass: {
options: {
sourceMap: true
},
develop: {
files: {
''main.css'': ''imports.scss''
}
}
}

Answer 3

Si no quiere usar concat, puede especificar todos los archivos en el directorio. Verifique este ejemplo: https://github.com/gruntjs/grunt-contrib-sass#compile-files-in-a-directory

Answer 4

Solo quiero tocar esto, porque tuve el mismo problema, y ​​esto realmente funcionará:

 sass: { // Task
dist: {
files: [{
// Set to true for recursive search
expand: true,
cwd: ''scss/'',
src: [''**/*.scss''],
dest: ''css/'',
ext: ''.css''
}]
}
}

¡Déjame saber como va!

Answer 5

es muy sencillo.

digamos que tienes esta estructura con 2 archivos scss:

 scss/
core/file.scss
templates/file2.scss
main.scss

entonces lo que debes hacer es: crear un archivo llamado: main.scss en tu carpeta raíz de scss e importar todos tus archivos de scss:

por ejemplo: main.scss tendrá:

@import "core/file.scss"
@import "templates/file2.scss"

ahora usa grunt-contrib-sass y simplemente llama al archivo main.scss :

hecho :)

//Sass ===============================
var sass;
config.sass = sass = {};
//production
sass.dist = {
options: { style: "compressed"}
, files: {
"public/stylesheets/myapp.production.css" : "sass/main.scss"
}
};
//development env.
sass.dev = {
options: { style: "expanded", lineNumber: true}
, files: {
"public/stylesheets/myapp.development.css" : "sass/main.scss"
}
};