¿Cómo importar SASS a través de npm?

Introducción a SASS: SASS significa ‘hojas de estilo sintácticamente asombrosas’. Es una extensión de CSS, que facilita el uso de variables de CSS, reglas anidadas, importación en línea y muchas otras funciones importantes.

SASS tiene dos opciones de sintaxis:

• SCSS (Sassy CSS): utiliza la extensión de archivo .scss y cumple totalmente con la sintaxis CSS.
• SASS: utiliza la extensión de archivo .sass y la sangría en lugar de corchetes.

Nota: Los archivos se pueden convertir de una sintaxis a otra usando el comando sass-convert .

Pasos para instalar SASS:
Paso 1: Para instalar SASS, primero asegúrese de que node y npm ya estén instalados en el sistema. De lo contrario, instálelos siguiendo las instrucciones que se proporcionan a continuación.

• Primero, descargue la última versión de un Node en el sistema e instálela.
• Ahora vaya al símbolo del sistema y dirija la carpeta donde desea instalar SASS.
• Después de eso, debe crear el archivo package.json . Gestiona las dependencias de nuestro proyecto.
• Use el comando escrito a continuación que le pedirá el nombre del paquete elegido por el usuario y la descripción. Hay algunas formalidades más, solo presione enter para eso y se creará su archivo package.json .

  npm init

Paso 2: Ahora, para instalar SASS, se usa un comando simple:

npm install node-sass --save

Nota: – –save en el comando anterior se usa para guardar el SASS en las dependencias del archivo json.
Ahora SASS se ha instalado en su sistema con éxito.

Paso 3: Para trabajar con SASS, vaya al archivo package.json en su proyecto, es decir, si está trabajando con VSC, abra su proyecto allí y luego abra el archivo package.json.
Obtendrá un archivo package.json como:

{
    "name": "sass-ex",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
    },
    "author": "",
    "license": "ISC"
}

Elimine el script de «prueba» y agregue su propio script de compilación de nombre: sass (se puede elegir cualquier otro nombre), proporcione el enlace de su archivo sass como destino.

paquete.json debería verse así:

{
    "name": "sass-ex",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "compile:sass": "node-sass scss/style.scss css/style.css"
    },
    "author": "",
    "license": "ISC"
}

Ahora regrese al símbolo del sistema y ejecute el comando

npm rum compile:sass

O simplemente agregue un script node-sass como este:
abra el archivo package.json en el editor de texto de su elección y agregue la siguiente línea dentro del objeto «scripts»:

"scss": "node-sass --watch assets/scss -o assets/css"

El archivo package.json se ve así:

{
    "name": "sass-ex",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "scss": "node-sass --watch assets/scss -o assets/css"
    },
    "author": "",
    "license": "ISC"
}

Guarde el archivo y ciérrelo. Ahora, en la raíz del directorio del proyecto, ejecute el comando que se indica a continuación para comenzar a observar cualquier cambio en sus archivos .scss.

npm run scss

Formas alternativas de instalar sass: es bueno saber un poco más. Entonces, para instalar Sass, también hay algunas formas alternativas. Puede instalar Sass a través de aplicaciones pagas y gratuitas como Codekit . Puede instalar Sass descargando el paquete del sitio oficial de Github y agréguelo directamente a su ruta.

Para instalar node-sass: una vez que instale npm, es hora de instalar node-sass. Puede hacerlo ejecutando este comando en su terminal para instalar el paquete globalmente.

npm install -g node-sass

o puede ejecutar el comando anterior sin el indicador -g para instalar solo en su directorio actual como se muestra a continuación.

npm install node-sass