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"
                    }
                };