web-dev-qa-db-fra.com

Comment compiler scss en css avec node-sass

J'ai un master.scss avec beaucoup d'importations à partir d'autres fichiers .scss. Si je modifie un fichier * .scss, le fichier master.css est généré automatiquement.

J'utilise uniquement le NGP, pas de Gulp ou Grunt! Cela devrait rester ainsi.

Mon script de construction actuel:

"scripts": {
  "watch-sass": "sass --watch src/scss/master.scss:dist/css/master.css"
}

C'est gentil mais ça prend beaucoup de temps à compiler!

Maintenant, j'essaie d'utiliser node-sass . Il devrait compiler très vite. Malheureusement, je ne comprends pas tout à fait ... node-sass est installé, via npm install node-sass

Où puis-je utiliser les éléments suivants (à partir de la documentation)?

var sass = require('node-sass');
sass.render({
  file: scss_filename,
  [, options..]
}, function(err, result) { /*...*/ });
// OR
var result = sass.renderSync({
  data: scss_content
  [, options..]
});

Ce n'est pas le cas dans le package.json, non?

Voici un tutoriel que j'ai lu: Utilisation de NPM en tant que gestionnaire de tâches

Le script est bon. Comment puis-je l'utiliser?

"scripts": {
  "sass": "node-sass sass/ -o build/css/"
}

_ {Ceci compilera tous les fichiers sass (qui ne commencent pas par un trait de soulignement) dans le répertoire de construction/css /.

J'espère votre aide!

cssnode.jssassnpmnode-sass
6
user3852555

Peut-être que cela couvre votre question: Comment compiler ou convertir sass/scss en css avec node-sass (no Ruby)?

Si c'est une option pour vous, je vous recommanderais d'utiliser Grunt, cela simplifiera les choses et les rendra plus rapides. Ce plugin grunt est probablement la meilleure option: https://www.npmjs.com/package/grunt-contrib-sass

// METTRE À JOUR

J'ai suivi le tutoriel que vous avez envoyé et il est très simple. Vous créez un fichier dans votre dossier racine appelé "package.json" contenant les éléments suivants:

{
  "watches": {
    "sass": "sass/**"
  },
  "scripts": {
    "sass": "node-sass sass/ -o build/css/",
    "dev": "rerun-script"
  }
}

Vous ouvrez ensuite la ligne de commande dans le dossier racine et exécutez les opérations suivantes:

npm install --save-dev node-sass

Ce qui précède installe node-sass

Vous exécutez alors:

npm install --save-dev rerun-script

Ce qui précède crée une tâche de surveillance afin que vous n'ayez pas à réexécuter node-sass chaque fois que vous apportez des modifications.

Et enfin tu cours

npm run dev

Terminé!

7
Vasilis Tsirimokos

Documentation.

Si vous voulez compiler automatiquement les fichiers, vous devez mettre le drapeau -w

node-sass -w -r assets/src/scss/ -o assets/dist/css/

Mon package.json

{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "build:js": "watchify assets/src/js/main_1.js -o 'exorcist assets/dist/js/main_1.js.map > assets/dist/js/main_1.js' -d -t [babelify --presets [latest]]",
    "build:scss": "node-sass -w -r assets/src/scss/ -o assets/dist/css/",
    "build": "npm run build:scss & npm run build:js"
  },
  "devDependencies": {
    "babel-cli": "^6.0.0",
    "babel-preset-latest": "^6.16.0",
    "babelify": "^7.3.0",
    "browserify": "^13.1.1",
    "exorcist": "^0.4.0",
    "node-sass": "^4.5.0",
    "watchify": "^3.7.0"
  },
  "browserify": {
    "transform": [
      "babelify"
    ]
  }
}

Version actuelle de package.json: https://Gist.github.com/artamonovdev/5f24aaca504e4d1b299bba0413f0a57d

4
artamonovdev

Le mode watch dans node-sass n'exécute pas la première compilation. Cela suppose que vous avez déjà exécuté node-sass.

Personnellement, j'utilise quelque chose comme ça:

{ "scripts": { "sass": "node-sass -o /path/to/dist /path/to/src", "sass:watch": "npm run sass && npm run sass -- --watch --recursive" } }  

Et vous pouvez l'utiliser comme ceci: npm run sass:watch

2
la3roug