mkdir your-directory touch index.htmlHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
<script src="./script.js"></script>
</head>
<body>
<h1>html vanilla scss project</h1>
</body>
</html>Make sure to check if everything is working, you can check with live server extension (on vs code : https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
Inside your directory
npm install gulp-cli -g
npm init -yIf you get some permissions problems
sudo npm install gulp-cli -g function defaultTask(cb) {
console.log("Gulp is working!");
cb();
}
exports.default = defaultTask; gulpIt should return "Gulp is working!" in your terminal
npm install sass/src
--->/scss
------>style.scss
// style.scss
@import "_global.scss";------>_global.scss
// global.scss
body {
color: red;
} const { src, dest, watch } = require("gulp");
const sass = require("gulp-sass");
function css() {
return src("./src/css/*.scss")
.pipe(sass().on("error", sass.logError))
.pipe(dest("./dist/assets/"));
}
exports.css = css; gulp npm install gulp-watch --save-devChange your gulpfie.js
const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const watch = require('gulp-watch');
// Define a task to compile Sass to CSS
gulp.task('css', function () {
return gulp.src('src/scss/**/*.scss') // Adjust the source path accordingly
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('dist/css')); // Adjust the destination path accordingly
});
// Define a default task
gulp.task('default', gulp.series('css'));
// Define a watch task
gulp.task('watch', function () {
gulp.watch("./src/scss/**/*.scss", gulp.series('css'));
// Add additional watch tasks for other source files if needed
});