web-dev-qa-db-fra.com

Comment compiler plusieurs fichiers scss en utilisant grunt-sass

J'essaie de compiler plusieurs fichiers .scss en un seul fichier CSS. Cela fonctionne réellement, mais ne saisit que le premier fichier ...

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

   }
}

Ruby n'est pas installé, donc grunt-contrib-sass n'est pas une option. Je fais la même chose dans Stylus comme ça ...

stylus: {
  compile : {
    files : {
      'css/g.css' : 'stylus/*.styl'
    }
  }
}
sassgruntjsgrunt-contrib-sass
24
Jackie

Qu'en est-il d'exécuter grunt-contrib-concat en premier?

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

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

   }
}

et ensuite tâche:

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

modifier

Comment utilisez-vous @import? Je ne suis pas un expert sur les détails, mais voici ce que je fais ...

dir/

main.scss
_nav.scss
_vars.scss
etc.

main.scss

@import "nav";
@import "vars";
etc.
22
Jordan Foreman

Je veux juste aborder ce sujet, car j'avais le même problème et cela fonctionnera réellement:

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

Laissez-moi savoir comment ça se passe!

10
Aaron Olin

Vous pouvez utiliser "grunt-sass-globbing". Il générera un fichier SCSS avec toutes les importations spécifiées dans votre Gruntfile . https://www.npmjs.com/package/grunt-sass-globbing/

Avec cette option, vous pouvez conserver vos cartes source sans avoir à concaténer vos fichiers SCSS. 

Étape 1: Créer un fichier d'importation

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

Étape 2: compilez votre fichier d'importation

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

Si vous ne voulez pas utiliser concat, vous pouvez spécifier tous les fichiers du répertoire. Commander cet exemple: https://github.com/gruntjs/grunt-contrib-sass#compile-files-in-a-directory

1
K.H.

c'est très simple.

disons que vous avez cette structure avec 2 fichiers SCSS:

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

vous devez donc: créer un fichier appelé: main.scss dans votre dossier racine scss et importer tous vos fichiers scss:

exemple: main.scss aura: 

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

maintenant, utilisez grunt-contrib-sass et appelez simplement le fichier main.scss :

terminé :)

//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"
                    }
                };
0
raduken