Questions tagged [gulp-sass]

1

votes
1

answer
51

Views

How to use gulp to run SASS transpiling?

I am new to gulp and want to use it to convert SASS to CSS. I have a src folder which has some scss files deep inside, and I want to mirror it to the public folder but as css files. This it the gulp code var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('styles', function() { gu...
omega
1

votes
0

answer
300

Views

gulp-sass is very slow in gulp 4

After updating the gulp version to gulp 4, gulp-sass is taking much time to watch and compile scss. It was fast with gulp version 3.9.1. Gulp-sass version is 2.3.2. Is there any solution? Note: Removing the sourcemaps didn't help.
Fathima Linsa K
1

votes
1

answer
279

Views

Sass compiling and browser-sync

I have this code for sass compiling: gulp.task('scss', function () { return gulp.src('./src/scss/**/*.scss') .pipe(scss().on('error', scss.logError)) .pipe(autoprefixer({ flexbox: true, grid: true, browsers: ['> 1%', 'last 5 years', 'Firefox > 20'] })) .pipe(gulp.dest('./src/styles')) .pipe(browserS...
Nat Davydova
1

votes
2

answer
270

Views

Gulp to compile the scss files and move the css and css.map files to the parent folder relative to the scss file location

var gulp = require('gulp'); var sass = require('gulp-sass'); var sourcemaps = require('gulp-sourcemaps'); gulp.task('sass', function () { return gulp.src(['./project/**/*.scss', '!./project/**/_*/']) .pipe(sourcemaps.init()) .pipe(sass().on('error', sass.logError)) .pipe(sourcemaps.write('.')...
Vai Wood
1

votes
0

answer
52

Views

How can i run two tasks simultaneously

I try to compile simultaneously the sass for public and admin and I face some troubles with the gulp file, maybe someone can figure out where I'm wrong. var gulp = require('gulp'); var browserSync = require('browser-sync').create(); var sass = require('gulp-sass'); // Static Server + w...
Terchilă Marian
1

votes
0

answer
100

Views

Type Error in gulp

I am new with gulp and currently i am working on a project. I am having an typeError which states [11:18:00] 'serve' errored after 78 ms [11:18:00] TypeError: 'listener' argument must be a function at _addListener (events.js:239:11) My code is as followed : gulp.task('serve',['sass'],function(){...
Abhishek Joshi
1

votes
0

answer
33

Views

Using bootstrap sass as a reference but without compiling to css (gulp-sass)

I have a module in a website that is loading as an embedded feature. The website itself has bootstrap in CSS so I don't need to re-compile it all into the module but i want to use mixins and extends in the module itself. I can just bower install bootstrap but that means to import the whole thing int...
Yaron Meiner
1

votes
1

answer
1.1k

Views

Browsersync + gulp-watch not working

In my project i use gulp + browsersync. After update gulp v.4.0.0., browsersync not working and my styles not compiled when watch run (only after in manual restart gulp watch). This is my gulpfile.js: var gulp = require('gulp'), sass = require('gulp-sass'), browserSync = require('browser-sync'), con...
Marina Voronova
1

votes
2

answer
129

Views

gulp-sourcemaps fails if target file gets too large

In my gulpfile.js I have this: // Sass configuration var gulp = require('gulp'), sass = require('gulp-sass'), cleanCSS = require('gulp-clean-css'), sourcemaps = require('gulp-sourcemaps'), concat = require('gulp-concat'), plumber = require('gulp-plumber'); autoprefixer = require('autoprefixer'); pos...
yodalr
1

votes
0

answer
97

Views

gulp-sass sometime not working in gulp.watch

'use strict' const gulp = require('gulp'), sass = require('gulp-sass'), sourceMap = require('gulp-sourcemaps'); gulp.task('sassToCss', ()=>{ return gulp.src('scss/application.scss') .pipe(sourceMap.init()) .pipe(sass()) .pipe(sourceMap.write('./')) .pipe(gulp.dest('css')); }); gulp.task('...
rahamanabdurar
1

votes
0

answer
36

Views

how to a href a page made a starter kit thats in another folder

Hi this might be confusing, sorry in advance. I'm creating a resume website and I'm trying to show the past projects I've made. The only problem is that I've made some of them with a starter kit that used gulp sass. When trying to link those pages I only get the html and not the scss. ps: still in t...
Shaune
1

votes
0

answer
24

Views

images don't render in browser

I use gulp as a automation and build system and when I build websites when i have background image in my css file added as a background-image property when I run gulp everything render properly in the browser, when I try to open index.html with gulp off images which comes from css files aren't rende...
kam773
1

votes
1

answer
93

Views

In Gulp how to prevent gulp-sass to minify css into 1 file

Is there a way to tell gulp-sass to process SASS files but still keep the source folder structure. We don't want them to be minified/concatenated into one main file. For example if I have: src/ components/ _header.scss _sidebar.scss _card.scss Can I tell it to process them into: dist/ components/ he...
Shaoz
1

votes
0

answer
39

Views

Gulp-sass not piping

Trying to write my gulpfile.js in the newer syntax. My html is piping fine, but my sass isn't compiling/piping? I'm not sure which because I'm not getting any errors. const { series, src, dest } = require('gulp'); const gulpSass = require('gulp-sass'); gulpSass.compiler = require('node-sass'); fu...
Roger Baker
1

votes
0

answer
40

Views

Gulp-Sass: Changes are not transferred to the frontend

The following happens with my gulp-sass configuration: When I execute the task, the .min.css is generated, but the changes are not visible in the frontend. Only after I manually go into the .min.css and save them, the changes in the frontend are visible. This strange behavior has never happened to m...
Codehan25
1

votes
1

answer
204

Views

How to create a gulp file with reusable functions - Multiple Watch points & Multiple Output destinations

Goal is to use this Gulp file to execute 'n' number of different source & destinations. How can we pass the arguments(source, destination) so that the CSS-Generator task is accepting those source & destinations and giving out the separate output files. var gulp = require('gulp'), sass = require('gu...
TheLearner
1

votes
1

answer
61

Views

gulp-watch stops after detecting only one change in .scss file. Is there any way to keep it running in this code?

I'm learning React development, and I use gulp and sass for the CSS. The gulp-watch task only completes the task compile_scss once and stops doing it. Is there any way to keep the watch active at all times? I've included the code and resulting terminal outputs below. The code I'm learning from is fo...
yeshwanth rahul
-1

votes
0

answer
2

Views

Why i can fix bug of sass in gulp for my build?

I have gulp-starter for html-layout. But often, when i want save some sass-file, i have some error, like that - https://i.imgur.com/4HlgVrV.png And, for-example, when i want write some like this: $maxW1: 1364px .wrapper margin: 0 auto max-width: $maxW1 position: relative padding: .1px 50px +xl() p...
feodoraxis
1

votes
1

answer
766

Views

Make Google's Web Starter Kit Gulpfile Livereload SCSS Imports

I started a new website theme using Google's Web Starter Kit. Previously, I worked with Grunt. Since this kit comes with Gulp, I decided to give it a try. The issue I'm having is with livereload and imported scss files. The kit includes a setup with a components.scss file and several imported partia...
jwkicklighter
1

votes
1

answer
1.2k

Views

Compiling with gulp/node/libsass is taking 30+ seconds

I'm using Gulp with node-sass to compile my sass. I am also using node-neat and node-bourbon. However, when I compile, it takes 30-50 seconds! What am I doing wrong? I'm not really sure how libsass plays into gulp-sass and node-sass, or what the difference between gulp-sass and node-sass is. In my g...
Steph
1

votes
1

answer
237

Views

Gulp SASS Task No longer 'Watches' Since Adding Media Queries

I had a gulp file which automatically watched my .JS and .SCSS files and whenever one of these changed, a new compiled version of all.main.js and all.min.css would be created. I've since started using breakpoints and media queries, and my gulp task no longer seems to watch the individul .SCSS files...
user3731438
1

votes
1

answer
1.6k

Views

How to change SASS path variable using Gulp?

I’m currently using both Bower and Gulp in a Laravel project to manage front end dependencies. I’m downloading all bower dependencies on a private assets folder using Bower and then pushing them to a public folder using Gulp. Here’s my gulpfile.js var gulp = require('gulp'); var flatten...
AlGallaf
1

votes
1

answer
725

Views

Understand Gulp pipe order

Context I want to parse some .sass files and replace a variable before compile them into .css. For this I used gulp, gulp-sass and gulp-preprocess: npm install gulp gulp-sass gulp-preprocess --save-dev Gulpfile.js var gulp = require('gulp'); var sass = require('gulp-sass'); var preprocess = require(...
a--m
1

votes
2

answer
435

Views

Yeoman / Bower / Gulp Auto Compiling SASS and Refreshing on File Change

I can't get Yeoman / Bower / Gulp and the gulp-webapp generator to auto compile SASS changes made to the Bootstrap _variables.scss file and reload. Basically changes done to files in this path: /bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/ I spent some time tweaking the...
fseminario
1

votes
2

answer
752

Views

Why is gulp-sass removing line breaks when I @import a SCSS file inside a media query?

I'm trying to migrate my site to compile SASS with gulp-sass instead of Compass. It does seem promising - I love the speed, and the integration with Gulp is useful. Unfortunately I'm finding gulp-sass does weird things to the line breaks in the CSS output when I import files inside media queries. We...
And Finally
1

votes
2

answer
379

Views

gulp autoprefixer gives invalid icon content of font-awesome

I've just setup the following Gulp task for SASS, using gulp-autoprefixer which causing a problem handling font-awesome icon 'content'. The way it works (without gulp-autoprefixer) gulp.task('sass', function() { gulp.src(['./src/vendor/style.scss', './src/app/style.scss']) .pipe(sourcemaps.init()) ....
wildhaber
1

votes
1

answer
517

Views

Node/Gulp failing (can't load gulp-sass) outside Visual Studio

We are setting up Gulp with our VS project. When running the tasks from the VS Task Runner, they work flawlessly, but from the command line, it's failing. Package.json: { 'name': 'OurProject', 'description': 'OurProject', 'repository': { 'type': 'git', 'url': 'https://github.com/something.git' }, 'p...
Diego Mijelshon
0

votes
0

answer
3

Views

Gulp watch runs once then fails

I have a project using Gulp and SASS and when I run gulp watch it runs the first change successfully without any issues. The problem occurs when I make any further changes - they seem to not register and are seemingly ignored. Here is my Gulpfile.js code: var theme_name = 'project-theme'; var gulp...
Kyle
1

votes
1

answer
985

Views

How to modify SaSS variable value before running CSS Gulp task

I have a list of json files, each containing a few key-value pairs that indicate colors, text size and other such information. I also have a set of scss files, including a variables.scss file with default values for those very variables (color, text size etc.). How can I obtain a Gulp task to gener...
Andrei Oniga
1

votes
1

answer
56

Views

Gulp not outputing anything

I am running the following in my gulpfile.js var gulp = require('gulp'); var postcss = require('gulp-postcss'); var csswring = require('csswring'); var sass = require('gulp-sass'); gulp.task('styles', function() { var processors = [ csswring ]; return gulp.src('xampp/htdocs/wordpress/wp-content/the...
Will M.
1

votes
1

answer
70

Views

SASS variable as style name [closed]

Is it possible to use a SASS variable in within a style name? If yes, what's the syntax? I've tried the following: @mixin bleed($direction) { margin-#{$direction}: 10px; } and @mixin bleed($direction) { #{'margin-' . $direction}: 10px; } with no luck. For reference, I'm using lib-sass and the error...
Ryuu
1

votes
2

answer
1k

Views

Gulp not refresh on changes to imported scss files

Gulp task in jhipster is not refreshing the main.css file when I change imported *.scss files, only if I change main.scss. The watch task in gulp shows me changes but nothing happens. Gulpfile.js // Generated on 2016-03-14 using generator-jhipster 2.27.2 /* jshint camelcase: false */ 'use strict';...
Michał Niedziela
1

votes
1

answer
698

Views

How to compile multiple themes in gulp-sass?

I have tried to compile multiple themes using same files. My folder structure is as below -styles green.scss red.scss -scss -control1.scss -control2.scss I need the output of both control1 and control2 css files based on green and red themes. var gulp = require('gulp'); var sass = require(...
Son04
1

votes
1

answer
1.1k

Views

NPM warning when installing gulp-sass: “[email protected]…”

When installing gulp-sass through PowerShell, I saw an NPM warning that I am trying to understand. I typed npm install gulp-sass in PowerShell, and while it appears the installation was successful, I saw this warning in the beginning: npm WARN deprecated [email protected]: cross-spawn no longe...
1

votes
1

answer
395

Views

gulp-sass new line for multi selector

I want to build .btn-default { color: #ccc; &:hover, &:focus { color: #ddd; } } into .btn-default { color: #ccc; } .btn-default:hover, .btn-default:focus { color: #ddd; } But instead, it compares into .btn-default { color: #ccc; } .btn-default:hover, .btn-default:focus { color: #ddd; } On the other...
Ovilia
1

votes
1

answer
309

Views

Can't Sprite using gulp.spritesmith

Showing Error when I sprite, I an new in gulp sprite, I need help, this the error showing my console Error in plugin 'sass' Message: sass\custom\_sprite.scss Error: index out of bounds for `nth($list, $n)` on line 421 of sass/custom/_sprite.scss >> width: nth($sprite, 5); [12:50:49] Finished 'sass...
1

votes
1

answer
294

Views

Unable to add node_module folder to git

I was just setting up environment for gulp and after I did that I tried to create a repo on git after which I was unable to use git add -A so I tried adding the folders separately, I was able to add all the folders other than node_modules and this is the error it shows. warning: unable to access 'no...
Immad Hamid
1

votes
1

answer
1.1k

Views

SASS stops compiling: File to import not found or unreadable: util/util

I have started a Laravel 5.3 project with Zurb Foundation (sass) a while ago. I configured gulpfile.js to compile my sass and it used to work properly until today where it stopped compiling. It worked a couple days ago. I did not touch the code or upgrade anything in between... Error: MBP-Nicolas:v1...
Nicolas Lemoine
1

votes
1

answer
194

Views

gulp-sourcemaps outputs incorrect sources in .css.map

I can't seem to figure out what is wrong with my configuration of gulp and gulp-sourcemaps. My main.css and main.css.map are compiled, yet I get incorrect sources: {'version':3,'file':'main.css','sources':['/assets/sass/main.css','/assets/sass/main.css','/assets/sass/main.css','/assets/sass/main.css...
Yates
1

votes
1

answer
287

Views

Undefined variable: “$gray-lighter” in DatePicker CSS

I am building and deploying my liferay theme through liferay-theme-generator I have sass 3.4.22 version. I have a datepicker.scss version 2.0 in my css folder. When building it I am having an error build/_css/datepicker.scss (Line 117: Undefined variable: '$gray-lighter'.) In build folder, _variable...
Elisheva

View additional questions