Saltar al contenido

Cómo compilar scss a css con node-sass

Esta es el arreglo más válida que encomtrarás brindar, pero estúdiala pausadamente y analiza si es compatible a tu proyecto.

Solución:

Tal vez esto cubra su pregunta: ¿Cómo compilar o convertir sass/scss a css con node-sass (sin Ruby)?

Si es una opción para usted, recomendaría usar grunt, hará que las cosas sean mucho más simples y rápidas. Este complemento grunt es probablemente la mejor opción: https://www.npmjs.com/package/grunt-contrib-sass

// ACTUALIZAR

Seguí el tutorial que me enviaste y es muy sencillo. Crea un archivo en su carpeta raíz llamado “paquete.json” que contiene lo siguiente:


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

Luego abre la línea de comando en la carpeta raíz y ejecuta lo siguiente:

npm install --save-dev node-sass

Lo anterior instala node-sass

Luego ejecutas:

npm install --save-dev rerun-script

Lo anterior crea una tarea de observación para que no tenga que volver a ejecutar node-sass cada vez que realice cambios

Y la última vez que corres

npm run dev

¡Hecho!

Documentación.

Si desea compilar archivos automáticamente, debe colocar el indicador -w

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

Mi paquete.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"
    ]
  

Versión real de package.json: https://gist.github.com/artamonovdev/5f24aaca504e4d1b299bba0413f0a57d

El watch modo en node-sass no ejecuta la primera compilación. Se supone que ya has corrido node-sass.

Personalmente, uso algo como esto:


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

Y puedes usarlo así: npm run sass:watch

Agradecemos que desees añadir valor a nuestro contenido añadiendo tu veteranía en las interpretaciones.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *