2017-10-19 4 views
0

J'essaie d'ajouter scss à mon fichier grunt donc j'ai exécuté la commande suivante: npm install grunt-contrib-sass sass --save-dev. Puis j'ajouté ce qui suit à mon Gruntfile.jsgrunt écrit le contenu de la console au lieu du fichier?

grunt.loadNpmTasks('grunt-contrib-sass'); et

grunt.initConfig({ 
... 
sass: { 
    dev: { 
     files: { 
      '<%=meta.src %>assets/css/all2.css': '<%=meta.src %>assets/scss/build.scss' 
     } 
    }, 

    dist: { 
     files: { 
      '<%=meta.dist %>/assets/css/all.min.css': '<%=meta.src %>/assets/scss/build.scss' 
     } 
    } 
}, 

Quand je lance ce que je reçois la sortie du build.scss dans la console et il crée un fichier vide?

Qu'est-ce que je manque ????

Running "sass:dev" (sass) task 
#flupdidup { 
    font-weight: bold; 
} 
Running "sass:dist" (sass) task 
#flupdidup { 
    font-weight: bold; 
} 
Done, without errors. 
Process terminated with code 0. 

une recréation minimale de la question se trouve ici: https://github.com/Peter-Optiway/grunt-sass-issue

+1

Pouvez-vous supprimer '<% = meta.src%>' et voir si cela fonctionne bien? –

+0

@TarunLalwani malheureusement cela n'a rien changé ''./app/assets/css/all2.css': '/ app/assets/scss/build.scss'' – Peter

+1

Possible d'obtenir un repo git minimal pour le débogage ? –

Répondre

0

J'ai réussi à résoudre le problème en changeant le package grunt-sass à la place.

npm install --save-dev load-grunt-tasks load-grunt-tasks Alors j'ajouté ce qui suit à mon Gruntfile.jsrequire('load-grunt-tasks')(grunt); et ça a fonctionné.

+0

Jetez un oeil à la réponse que j'ai posté –

3

Passer à grunt-sass était toujours une option, mais votre problème n'était pas à cause de cela. Le problème était dû à l'installation sass en utilisant npm.

npm install -g sass 

Lorsque vous regardez ce

$ sass --help 
Compile Sass to CSS. 

Usage: dart-sass <input> 

-s, --style   Output style. 
        [expanded (default)] 

-c, --[no-]color Whether to emit terminal colors. 
    --[no-]trace Print full Dart stack traces for exceptions. 
-h, --help   Print this usage information. 
    --version  Print the version of Dart Sass. 

Il n'a pas de paramètre de sortie. Alors que grunt-contrib-sass attend la sass à installer à partir de la gemme rubis.

$ sudo gem install sass 

Maintenant SASS aura différentes options

$ sass --help 
Usage: sass [options] [INPUT] [OUTPUT] 

Description: 
    Converts SCSS or Sass files to CSS. 
... 

Et maintenant, la construction fonctionne bien

$ cat ./dist/assets/css/all.min.css 
main #flupdidup { 
    font-weight: bold; 
    background: #eeffcc; } 

/*# sourceMappingURL=all.min.css.map */ 
+0

À la fin «grunt-sass» était une meilleure option car il ne repose pas sur le rubis, mais vous obtenez les 50 points pour votre effort! – Peter