szit

Felhasználói eszközök

Eszközök a webhelyen

Itt vagy: start » oktatas » web » nodejs » gulp » sass
Nyomvonal: • sass
oktatas:web:nodejs:gulp:sass

Tartalomjegyzék

< Gulp

Gulp - Sass

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

oktatas/web/nodejs/gulp/sass.txt · Utolsó módosítás: 2022/07/16 00:37 szerkesztette: admin

Eszközök az oldalon

Hacsak máshol nincs egyéb rendelkezés, ezen wiki tartalma a következő licenc alatt érhető el: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki