web-dev-qa-db-fra.com

Comment compiler des fichiers .sass lors de l'enregistrement dans Visual Studio 2015

Comment obtenir un environnement de précompilateur complet (c.-à-d. Scss) opérationnel dans Visual Studio 2015? Ceci est une question fraternelle à celle-ci concernant moins .

asp.netsassgruntjsvisual-studio-2015
65
Nicholas Petersen

Si vous utilisez Gulp + Visual Studio 2015

  1. Première installation de gulp-sass c'est le fichier package.json
{
      "name": "ASP.NET",
      "version": "0.0.0",
      "devDependencies": {
        "gulp": "3.8.11",
        "gulp-concat": "2.5.2",
        "gulp-cssmin": "0.1.7",
        "gulp-uglify": "1.2.0",
        "rimraf": "2.2.8",
        "gulp-sass": "2.2.0"
      }
  1. Sur le gulpfile.js
   var sass = require("gulp-sass");
   var paths = {
     webroot: "./wwwroot/"
   }
   paths.scss = paths.webroot + "css/**/*.scss";
   gulp.task('sass', function() {
     gulp.src(paths.scss)
       .pipe(sass())
       .pipe(gulp.dest(paths.webroot + "css"));
   });
   gulp.task('watch-sass', function() {
     gulp.watch(paths.scss, ['sass']);
   })
  1. Ouvrez maintenant le "Task Runner Explorer" et double-cliquez sur la tâche: "watch-sass" Task Runner Explorer

Maintenant, chaque fois que vous enregistrez le fichier scss, le fichier css compilera et modifiera le fichier sass.

31
Sanchitos

Ceci peut également être réalisé sans avaler ni grogner en cliquant simplement dans Visual Studio.

Installer le compilateur Web

  1. Dans Visual Studio, appuyez sur Outils -> Extensions et mises à jour.
  2. Recherchez Web Compiler (créé par Mads Kristensen) et installez-le.
  3. Le redémarrage de Visual Studio sera nécessaire.

Compiler des fichiers

  1. Cliquez avec le bouton droit sur le fichier .scss dans l'Explorateur de solutions pour configurer la compilation.
  2. Appuyez sur Compilateur Web -> Compiler le fichier (Maj + Alt + Q).

Un fichier appelé compilerconfig.json est créé à la racine du projet où vous pouvez modifier le comportement du compilateur. En cliquant avec le bouton droit sur le fichier compilerconfig.json, vous pourrez facilement exécuter tous les compilateurs configurés.

Chaque fois qu'un fichier .scss est modifié dans Visual Studio, le compilateur s'exécute automatiquement pour produire le fichier de sortie compilé.

Compiler sur Build

  1. Cliquez avec le bouton droit sur le fichier compilerconfig.json.
  2. Appuyez sur Compilateur Web -> Activer la compilation lors de la construction
  3. En cliquant sur l'élément de menu, vous serez invité à indiquer qu'un package NuGet sera installé dans le dossier des packages sans ajouter de fichiers au projet lui-même. Le paquet NuGet contient une tâche MSBuild qui exécutera exactement les mêmes compilateurs sur le fichier compilerconfig.json situé à la racine du projet.
105
willedanielsson

Extension du compilateur Web pour VS2015

Gulp est nécessaire. npm install -g gulp

J'espère que cela aide ... quelques cerceaux de moins.

Modifier:

J'ai rencontré un problème avec le compilateur Web lors de la conversion de chaînes en caractères Unicode alors qu'il n'aurait pas dû le faire. Je suis passé à cette implémentation http://blog.oxfordcc.co.uk/compiling-sass-gulp-visual-studio/ dans VS2015 et la compilation du code CSS est correcte. Ajouté juste au cas où quelqu'un d'autre rencontrerait le même problème.

9
Jim Harkins

Si vous ne voulez pas vous perdre dans les subtilités de la configuration manuelle de la compilation, il existe un certain nombre d'extensions étonnamment simples disponibles qui peuvent gérer cela pour vous:

Compilateur Web (GRATUIT)

Cela a déjà été mentionné, mais Mads Kristensen (l'auteur de Web essentials) a créé un outil de compilation autonome appelé Web Compiler . Tout ce que vous avez à faire est de l'installer, puis cliquez avec le bouton droit de la souris sur l'un des fichiers SASS que vous souhaitez compiler et sélectionnez Compilateur Web> Compiler le fichier. À partir de ce moment, il est regardé et à chaque fois qu'il est sauvegardé, le fichier sera compilé.

Télécharger le compilateur Web

CompileSASS (GRATUIT)

Semblable au compilateur Web, il s’agit d’une extension autonome créée pour fonctionner à la fois dans les versions VS2013 et VS2015 car la compilation a été supprimée de la populaire extension Web Essentials. Il est léger et fait très bien son travail avec un excellent rapport d’erreurs. Lisez le blog de l'auteur sur l'extension ici .

Télécharger Compile SASS

Web Workbench (GRATUIT/PAID)

Web Workbench de Mindscape était mon extension préférée pendant de nombreuses années lors de la compilation du SASS, mais je me suis depuis lors éloigné en faveur des alternatives gratuites. Malgré tout, la version Pro est un outil puissant offrant de nombreuses façons de personnaliser les fichiers générés, mais elle est également assez chère (39 $) compte tenu des outils gratuits disponibles.

Télécharger Web WorkBench

6
Chris Spittles

La plupart des étapes en réponse à cette question sont identiques aux étapes données par 'Maverick' sur ce post qui concernent comment faire la même chose pour moins. Cependant, quelqu'un ne m'a pas permis de modifier cette question pour y inclure simplement sass (ce qui était peut-être mieux, je ne sais pas). La réponse suivante s'appuie donc sur les étapes spécifiées par Maverick dans le message ci-dessus, avec ces différences:

(Avant-projet pour les projets vides) Si vous avez commencé avec un projet vide, ajoutez d'abord Grunt et Bower:

Faites un clic droit sur la solution -> Ajouter -> 'Grunt and Bower to Project' (puis attendez une minute qu'il soit entièrement installé)

package.json:

"devDependencies": {
    "grunt": "^0.4.5",
    "grunt-bower-task": "^0.4.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-contrib-sass": "^0.9.2"
}

(Pour votre information: lien grunt-contrib-sass )

Ensuite:

Dépendances -> cliquez avec le bouton droit sur NPM -> Restaurer les packages.

gruntfile.js

1) Ajoutez ou assurez-vous que ces trois lignes sont enregistrées près du bas (en tant que tâches NPM):

grunt.loadNpmTasks("grunt-bower-task");
grunt.loadNpmTasks("grunt-contrib-watch");
grunt.loadNpmTasks("grunt-contrib-sass");

2) Toujours dans le fichier gruntfile.js, ajoutez les configurations init, comme ci-dessous.

{Avertissement: je ne suis pas un expert sur de telles configurations. J'ai trouvé la configuration sass sur un excellent article de blog il y a quelque temps que je ne peux pas localiser pour donner un crédit. La clé était que je voulais trouver tous fichiers du projet dans un certain dossier (plus des descendants). Ce qui suit fait que (notez "someSourceFolder/**/*.scss", et voir la remarque connexe importante ici ). }

// ... after bower in grunt.initConfig ...
"default": {
    "files": [
        {
            "expand": true,
            "src": [ "someSourceFolder/**/*.scss" ],
            "dest": "wwwroot/coolbeans", // or "<%= src %>" for output to the same (source) folder
            "ext": ".css"
        }
    ]
},
"watch": {
    "sass": {
        "files": [ "someSourceFolder/**/*.scss" ],
        "tasks": [ "sass" ],
        "options": {
            "livereload": true
        }
    }
}

Maintenant, suivez les instructions pour Task Runner Explorer comme indiqué dans l’autre réponse. Assurez-vous de fermer et de rouvrir le projet. Il semble que vous deviez exécuter (double-cliquez) "surveiller" (sous "Tâches") chaque fois que le projet est démarré pour que la surveillance soit surveillée, mais cela fonctionnera ensuite lors des sauvegardes.

4
Nicholas Petersen