Gulp - Sass

Szerző: Sallai András
Copyright © 2022, Sallai András
Licenc: CC BY-SA 4.0
Web: https://szit.hu

Projekt készítése

mkdir app01
cd app01
npm init -y
npm install --save-dev gulp  
npm install --save-dev gulp-sass
npm install --save-dev sass

A sass csomag helyben is telepítve kell legyen.

Mini Sass fájl

style.scss

$primary-color: #333;
$background: skyblue;
 
body {
    color: $primary-color;
    background-color: $background;
}

gulpfile.js

gulpfile.js

const { src, dest } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
 
 
function buildStyles(cb) {
    src('src/sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(dest('src/css'));
    cb();
}
 
exports.build = buildStyles;

HTML

src/index.html

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sass</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
 
    <h1>Sass teszt</h1>
 
</body>
</html>

Forrás

https://www.npmjs.com/package/gulp-sass