I use gulp. My gulpfile.js:
"use strict";
const gulp = require("gulp");
const sass = require("gulp-sass");
const browserSync = require("browser-sync").create();
const autoprefixer = require("gulp-autoprefixer");
const sourcemaps = require("gulp-sourcemaps");
const concat = require("gulp-concat");
sass.compiler = require("node-sass");
function generateCSS() {
return gulp
.src("app/scss/**/*.scss")
.pipe(sourcemaps.init())
.pipe(sass({ outputStyle: "compressed" }).on("error", sass.logError))
.pipe(concat("styles.css"))
.pipe(autoprefixer())
.pipe(sourcemaps.write())
.pipe(gulp.dest("app/css"))
.pipe(browserSync.stream());
}
function watchFiles() {
browserSync.init({
server: {
baseDir: "app",
},
});
gulp.watch("app/scss/**/*.scss", generateCSS);
gulp.watch("app/*.html").on("change", browserSync.reload);
}
exports.css = generateCSS;
exports.watch = watchFiles;
exports.default = gulp.series(generateCSS, watchFiles);
When I use at-rule #use, I have an error - https://monosnap.com/file/nAfh13fp9WsgfDetNmJ4F57dYEgVXk
My code - https://monosnap.com/file/ucW4I8ehPDPQojdZYJSQmI4jbMOJpi
I don't understand why that happened.
I need your help guys. Thanks a lot.
This error is due to that node-sass has not supported sass's #use yet. You could check out node-sass's issue 2886.
AFAK, you should change the gulp-sass's compiler to Dart Sass, the primary implementation of Sass which supports all new sass features. You could check out the doc here.
- sass.compiler = require("node-sass");
+ sass.compiler = require("sass");
Related
I'm trying to add Bootstrap with SASS capability to my ASP.NET Core 2 project, but have difficulty accomplishing this. I used NPM to install Bootstrap into node_modules, then got Gulp to move minified css and js dependencies into my wwwroot directory. Now I want to have a SASS file where I override Bootstrap's defaults to fit my needs, and this is where I'm stuck. Here's my Gulp code, 'compile-sass' is not working. I get missing binding error.
const gulp = require('gulp');
const concat = require('gulp-concat');
const sass = require('gulp-sass');
const root = "./wwwroot/";
const bootstrapStyles = "node_modules/bootstrap/dist/css/bootstrap.min.css";
const bootstrapSass = "node_modules/bootstrap/scss/bootstrap.scss";
const bootstrapScripts = [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
];
gulp.task('default', ['build-all']);
gulp.task('build-all', ['build-css', 'build-js']);
gulp.task('build-css', () => {
return gulp.src(bootstrapStyles)
.pipe(gulp.dest('./wwwroot/'));
});
gulp.task('build-js', () => {
return gulp.src(bootstrapScripts)
.pipe(concat('bootstrap.min.js'))
.pipe(gulp.dest(root));
});
gulp.task('compile-sass', () => {
gulp.src(bootstrapSass)
.pipe(sass())
.pipe(gulp.dest(root));
});
// watch bootstrap-overrides.scss for changes and recompile SASS
gulp.task('watch-sass', () => {
gulp.watch(root + 'bootstrap-overrides.scss', ['compile-sass']);
});
This is the exact excerpt of the problem:
gulp.task('compile-sass', () => {
gulp.src(bootstrapSass)
.pipe(sass())
.pipe(gulp.dest(root));
});
Edit: Solved the build error by running the following command: npm rebuild node-sass
My bootstrap-overrides.scss edits are not changing variable values. How do I correctly compile SASS?
Solved it.
const gulp = require('gulp');
const concat = require('gulp-concat');
const sass = require('gulp-sass');
const rename = require('gulp-rename');
const root = "./wwwroot/";
const vendorScripts = [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
];
const vendorStyles = "node_modules/bootstrap/scss/bootstrap.scss";
const customerStyleOverrides = root + "scss/*.scss";
gulp.task('default', ['build-vendor']);
gulp.task('build-vendor', ['build-vendor-css', 'build-vendor-js']);
// merge javascripts into a single vendor.min.js file and save it to wwwroot
gulp.task('build-vendor-js', () => {
return gulp.src(vendorScripts)
.pipe(concat('vendor.min.js'))
.pipe(gulp.dest(root));
});
// compile bootstrap and save as vendor.min.css to wwwroot
gulp.task('build-vendor-css', () => {
return gulp.src([vendorStyles, customerStyleOverrides])
.pipe(sass({ outputStyle: 'compressed' }))
.pipe(rename('vendor.min.css'))
.pipe(gulp.dest(root));
});
// watch for changes to styles.css and recompile bootstrap on styles change
gulp.task('watch-sass', () => {
gulp.watch(root + "scss/styles.scss", ['build-vendor-css']);
});
Source link - I don't know what is missing here
Everything fine if I am not including json file
1) gulpfile.js
var jsonSass = require('gulp-json-sass'),
gulp = require('gulp'),
concat = require('gulp-concat'),
sass = require('gulp-ruby-sass');
gulp.task('sass', function() {
return gulp
.src(['sass/example.json', 'sass/example.scss'])
.pipe(jsonSass({
sass: true
}))
.pipe(concat('output.scss'))
.pipe(sass())
.pipe(gulp.dest('out/'));
});
gulp.task('default', ['sass']);
2) example.json
{
"color": "blue"
}
3) example.scss file
.test{
color:$color;
}
4) error message
1. You want to output SCSS, not SASS. That means your sass option for gulp-json-sass is wrong. From the docs:
If truthy, output valid sass variables. If false, output scss variables.
2. You can't use gulp-ruby-sass in a pipe. From the docs:
Use gulp-ruby-sass instead of gulp.src to compile Sass files.
That means .pipe(sass()) won't work. You have to use gulp-sass instead of gulp-ruby-sass.
var jsonSass = require('gulp-json-sass'),
gulp = require('gulp'),
concat = require('gulp-concat'),
sass = require('gulp-sass');
gulp.task('sass', function() {
return gulp.src(['sass/example.json', 'sass/example.scss'])
.pipe(jsonSass({
sass: false
}))
.pipe(concat('output.scss'))
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('out/'));
});
Hi guys am trying to use font-awesome in my postcss layout but it seems not to work. So i tried installing sass with posts to see if it will work but i do not know how to go about it.
I already installed npm gulp for sass
This is my gulp file configuration
var gulp = require('gulp'),
gutil = require('gulp-util'),
webserver = require('gulp-webserver'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer'),
precss = require('precss'),
cssnano = require('cssnano'),
animation = require('postcss-animation'),
sass = require('gulp-sass'),
source = 'process/css/',
dest = 'builds/postcss/';
gulp.task('html', function() {
gulp.src(dest + '*.html');
});
gulp.task('css', function() {
gulp.src(source + 'style.css')
.pipe(postcss([
precss(),
animation(),
autoprefixer(),
cssnano()
]))
.on('error', gutil.log)
.pipe(gulp.dest(dest + 'css'));
});
gulp.task('watch', function() {
gulp.watch(source + '**/*.css', ['css']);
gulp.watch(dest + '**/*.html', ['html']);
});
gulp.task('webserver', function() {
gulp.src(dest)
.pipe(webserver({
livereload: true,
open: true
}));
});
gulp.task('default', ['html', 'css', 'webserver','watch']);
And am trying to add this sass configuration
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var sass = require('gulp-sass');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
gulp.task('css', function () {
var processors = [
autoprefixer,
cssnano
];
return gulp.src('./src/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(postcss(processors))
.pipe(gulp.dest('./dest'));
});
Use this https://github.com/jonathantneal/precss or https://github.com/postcss/postcss-scss
example
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var processors = [
require('postcss-font-awesome')
require('precss')
];
gulp.task('css', function () {
gulp.src(['css/style.pcss'])
.pipe(postcss(processors))
.pipe(gulp.dest('css'));
});
I'm setup as outlined below. The good news: styles are being compiled, the bad news: gulp doesn't seem to watch the scss files for a change and compile automatically?
// Include gulp
var gulp = require('gulp');
// Plugins
var concat = require('gulp-concat');
var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');
var include = require('gulp-include');
var sass = require('gulp-sass');
var minifycss = require('gulp-minify-css');
// Styles
gulp.task('styles', function() {
gulp.src('./_themes/blanktheme/ui/scss/styles.scss')
.pipe(include())
.pipe(sass({
errLogToConsole: true
}))
.pipe(minifycss())
.pipe(gulp.dest('./_themes/blanktheme/ui/css/'))
});
// Watch
gulp.task('default', ['watch'], function() {
gulp.watch('./_themes/blanktheme/ui/scss/*.scss', ['styles']);
});
gulp.task('default', ['styles', 'watch']);
I think this come from the fact you have two tasks default. I guess gulp ignore the first one (with gulp.watch) to only trigger the second one. Then you have dependencies with watch but seems like watch does not exist ?
You can install gulp-watch locally, and include it in your file. Give a look at gulp-watch documentation it might help.
Try this :D
var watch = require('gulp-watch');
// Styles
gulp.task('styles', function() {
gulp.src('./_themes/blanktheme/ui/scss/styles.scss')
.pipe(include())
.pipe(sass({
errLogToConsole: true
}))
.pipe(minifycss())
.pipe(gulp.dest('./_themes/blanktheme/ui/css/'))
});
// Watch
gulp.task('watch', function() {
watch('./_themes/blanktheme/ui/scss/*.scss', function () {
gulp.start('styles');
});
});
gulp.task('default', ['styles', 'watch']);
I'm currently want to improve my gulp file.
I want to concat the compiled scss with normalize.css in one task using stream.
Actually I'm doing it like this.
var gulp = require('gulp'),
runSequence = require('run-sequence'),
minifyCss = require('gulp-minify-css'),
sourcemap = require('gulp-sourcemaps'),
concat = require('gulp-concat'),
scss = require('gulp-ruby-sass');
var path = {
normalize: 'app/bower_components/normalize.css/normalize.css',
dir: './tmp',
scss: './app/styles/main.scss',
css: './tmp/styles'
};
gulp.task('styles', function(callback) {
runSequence('scss', 'css', callback);
});
gulp.task('scss',function() {
return scss(path.scss)
.on('error',function(err) {
console.error('Error!', err.message);
});
});
gulp.task('css', function() {
return gulp.src([path.normalize, './tmp/styles/main.css'])
.pipe(concat('main.css'))
.pipe(sourcemap.init())
.pipe(minifyCss())
.pipe(sourcemap.write())
.pipe(gulp.dest(path.css));
});
You can easily do this using the merge
package:
var merge = require('merge2');
gulp.task('styles', function() {
return merge(
gulp.src(path.normalize), // our first stream
scss(path.scss) // our second stream
) // merged at this point
.pipe(concat('main.css'))
.pipe(sourcemap.init())
.pipe(minifyCss())
.pipe(sourcemap.write())
.pipe(gulp.dest(path.css));
})
You might even be able to initialize sourcemaps for both streams, try the {sourcemap: true} option from gulp-ruby-sass
Update
I took a bigger look into your problem and found a way to include sourcemaps all the way through:
var merge = require('merge2');
var postcss = require('gulp-postcss');
var csswring = require('csswring');
gulp.task('styles', function() {
return merge(
gulp.src(path.normalize)
.pipe(sourcemaps.init()),
scss(path.scss, {sourcemap: true})
.pipe(sourcemaps.write())
)
.pipe(postcss([csswring]))
.pipe(concat('main.css'))
.pipe(sourcemaps.write())
.pipe(gulp.dest(path.css));
});
Be aware that gulp-minify-css sometimes returns buggy sourcemaps, that's why I replaced it with gulp-postcss
Rename normalize.css to normalize.scss;
In your ./app/styles/main.scss use: #import "../../app/bower_components/normalize.css/normalize.scss";
Also see:
https://github.com/chriseppstein/sass-css-importer, which allows you:
#import "CSS:some_folder/some_css_file"
For the latest version of libSass, see: https://github.com/sass/libsass/pull/754#issuecomment-68139214
#import "file"; // load partial file.(s[ac]ss|css)
#import "file.css"; // create #import on top
#import url("file"); // create #import on top
#import url("file.css"); // create #import on top
So #import "../../app/bower_components/normalize.css/normalize" should work and import your CSS file inline.
gulp concat JS and CSS
var gulp = require('gulp');
var sass = require('gulp-sass');
var concat= require('gulp-concat');
var minifyCss = require('gulp-cssnano');
var uglify = require('gulp-uglify');
var pump = require('pump');
gulp.task('sass', function(){
gulp.src(['css/**/*.scss' ,'css/**/*.css' ])
.pipe(sass()) // Using gulp-sass
.pipe(minifyCss())
.pipe(concat('style_all.css'))
.pipe(gulp.dest('build/css'))
});
gulp.task('compressJS', function (cb) {
return gulp.src(['lib/*.js'])
.pipe(concat('concat.js'))
.pipe(uglify())
.pipe(gulp.dest('build/js'))
});
gulp.watch('files-to-watch', ['tasks', 'to', 'run']);
gulp.task('default', ['sass' , 'compressJS'] , function(){
console.log(':::default:::')
});
gulp.watch(['css/**/*.scss' ,'css/**/*.css' ], ['sass']);
gulp.watch(['lib/*.js'], ['compressJS']);