There was a hiccup during the gulp build process specifically on the gulp

When I run gulp build, I encounter a specific error in the CLI

events.js:141
      throw er; // Error event not handled
      ^
 Error: E:\Projects\gulp\css\styles.min.css:546:10: Missing semicolon ←[90m 544 | ←[39m     b
ackground←[33m:←[39m ←[36m-ms-linear-gradient←[39m←[36m(top,  #5c710d 0%,#93b904 100%)←[39m←[33m;←[39m
 ←[90m 545 | ←[39m      background←[33m:←[39m ←[36mlinear-gradient←[39m←[36m(to bottom,  #5c710d 0%,#93b904 100%)←[39m←[33m;←[39m

←[31m←[1m>←[22m←[39m←[90m 546 | ←[39m   filter←[33m:←[39m progid ←[33m:←[39m←[36mDXImageTransform.Microsoft.gradient←[39m←[36m(←[39m star
tColorstr=←[32m'#5c710d'←[39m, endColorstr=←[32m'#93b904'←[39m,GradientType=0 ←[36m)←[39m←[33m;←[39m
 ←[90m     |       ←[31m←[1m^←[22m←[39m
 ←[90m 547 | ←[39m←[33m}←[39m
 ←[90m 548 | ←[39m←[33m.ui-overlay-c←[39m ←[33m{←[39m

The CSS rule for gradients used in the stylesheet is browser specific

background: -moz-linear-gradient(top,  #5c710d 0%, #93b904 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c710d), color-stop(100%,#93b904)); 
background: -webkit-linear-gradient(top,  #5c710d 0%,#93b904 100%);
background: -o-linear-gradient(top,  #5c710d 0%,#93b904 100%);
background: -ms-linear-gradient(top,  #5c710d 0%,#93b904 100%);
background: linear-gradient(to bottom,  #5c710d 0%,#93b904 100%);
filter: progid :DXImageTransform.Microsoft.gradient( startColorstr='#5c710d', endColorstr='#93b904',GradientType=0 );

The node packages being used are,

"devDependencies": {
    "bower": "^1.8.0",
    "gulp": "^3.9.1"
    "browser-sync": "^2.18.8",
    "del": "^2.2.2",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-cache": "^0.4.6",
    "gulp-cssnano": "^2.1.2",
    "gulp-if": "^2.0.2",
    "gulp-imagemin": "^3.1.1",
    "gulp-sass": "^3.1.0",
    "gulp-sourcemaps": "^2.4.1",
    "gulp-uglify": "^2.1.2",
    "gulp-useref": "^3.1.2",
    "run-sequence": "^1.2.2"
  }

Finally, here is the gulp sass task

gulp.task('sass', function() {
  return gulp.src('app/scss/**/*.scss') // Gets all .scss files in app/scss and subdirectories    
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError)) // Compiles with gulp-sass, logs errors
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('app/css')) // Outputs to css folder
    .pipe(browserSync.reload({ // Live reload with Browser Sync
      stream: true
    }));
})

How can I resolve this error? Any assistance or guidance will be highly appreciated. Thank you in advance. Currently using node 4.4.4

A new error message has emerged.

events.js:141
      throw er; // Error event not handled
      ^
 Error: E:\Projects\gulp\css\styles.min.css:1429:19: Unknown word ←[90m 1427 |
 ←[39m←[33m}←[39m
 ←[90m 1428 | ←[39m←[33m.list←[39m ←[33m.icn←[39m ←[33m{←[39m
←[31m←[1m>←[22m←[39m←[90m 1429 | ←[39m  margin-top←[33m:←[39m 10px!important
 ←[90m      |               ←[31m←[1m^←[22m←[39m
 ←[90m 1430 | ←[39m←[33m}←[39m
 ←[90m 1431 | ←[39m←[33m.list←[39m ←[33m.txt←[39m ←[33m{←[39m

Please suggest ways to interpret these types of errors. Are there any online CSS linters for gulp-sass or Atom add-ons that can help lint CSS before gulp-build? Thank you once again

cssnpmgulp-sass

Answer №1

In your filter property, there is an additional space between progid and 

:DXImageTransform.Microsoft.gradient
, leading to the error of a missed semicolon.

Furthermore, make sure to include gulp-autoprefixer in your Gulp setup for Sass tasks (placed before .pipe(sourcemaps.write())) :

.pipe(autoprefixer())

Only include the following line:

background: linear-gradient(to bottom,  #5c710d 0%,#93b904 100%);

Autoprefixer will handle the rest by adding the necessary prefixes based on your configurations.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue: Address already in use - Port 3000 on DigitalOcean server

After following a video chat tutorial on GitHub, I decided to host the project on DigitalOcean to test some webRTC features. Although I successfully deployed it on Heroku, I encountered an error when trying to host it on a new droplet using my initial $100 ...

node.jsnpmdigital-ocean

Body section CSS selector

Can a CSS selector be included within the body section of an HTML document? Here's an example of my code (although it is not functioning as expected): <html> <head> </head> <body> <div style= "a[target=_blank] {backgroun ...

javascripthtmlcss

Adjusting the size of HTML checkboxes for creating PDF documents

Currently facing a dilemma. When it comes to resizing checkboxes in HTML, the common recommendation is to use JavaScript to prompt the browser to adjust the size of the elements. However, in our scenario, we rely on wkhtmltopdf, a command line tool that u ...

htmlcsspdfwkhtmltopdf

What is the best way to position four circles within a square container using CSS?

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .circles { height: 150px; width: 150px; background-color: #bbb; border-radius: 50%; displ ...

htmlcss

issue with custom $position-values not being recognized in Bootstrap 5

Having trouble positioning text on top of a bootstrap carousel using Bootstrap's position class. The default values (0,50,100) aren't giving me the appearance I want. I tried adding custom values to the $position-values in my scss file, but they ...

csssassfrontendreact-bootstrapbootstrap-5

Expanding CSS Grid to Occupy Remaining Area

I'm currently utilizing CSS grid to construct a basic 3 column layout. Here's a snippet of my code... .container { display:grid; grid-template-columns:1fr 1fr 1fr; } ...

htmlcsscss-grid

What is the most effective way to utilize CSS in order to contain a page filled with tall nested elements within the height of the viewport?

How can I restrict a page to the height of the viewport? I want to control the overflow-y on child elements, but it seems like I cannot limit the height--I can only set a max-height in pixels or a percentage. I believe I need to confine the height of certa ...

cssbootstrap-4flexboxviewport-units

Scrolling horizontally with scrollbar functionality

My goal is to create a webpage with a horizontally scrollable DIV element in the center, where the scrollbar appears only at the bottom of the DIV, not at the bottom of the entire page. I am wondering if it is possible to have a scrollbar placed at the ve ...

csscss-positionhorizontal-scrolling

Arranging Bootstrap buttons in a clean row

How can I add two nav buttons "register" and "sign in" to the top right of my navigation bar, and include a separate button "request a demo" below them without displacing the first two buttons? I am currently using a br tag to push the third button down ...

htmlcsstwitter-bootstrap

Achieving success by correctly reaching the window's edge during an event (onscroll)

This happens to be my 1st inquiry. Specifically, I have a navigation menu with a transparent background and I am attempting to alter the background once it reaches the top edge of the window. window.addEventListener("scroll", navSticky); function navSt ...

javascripthtmlcssonscroll

CSS KeyFrame animations

My goal is to have my elements gracefully fade in with 2 lines extending out of a circle, one to the left and one to the right. However, I am struggling to achieve this. Every time I attempt to display the lines, it ends up shrinking the entire design. M ...

csscss-animationskeyframe

Adding a sign at the center of a map in React-Leaflet

One of the features I added to the map is a center indicator sign. <MapContainer fullscreenControl={true} center={center} zoom={18} maxNativeZoom = {22} maxZoom={22} classNa ...

javascriptcssreactjsleafletreact-leaflet

What steps can I take to address the issue of my dropdown menu items overlapping each other on

Despite numerous challenges, I finally succeeded in getting my dropdown buttons positioned at the top of the screen, fitting into the navbar, and aligning next to each other. However, the dropdown menus now overlap each other and both drop below the "About ...

htmlcssdrop-down-menudropdownnavbar

How to place a stylish font over an image and recreate hover effects

I am looking to place social media icons below an image next to the photo's title, including Facebook, Twitter, Soundcloud, and Instagram. I want these icons to rotate along with the image when it is hovered over. HTML <div class="polaroid-image ...

javascriptjqueryhtmlcssimage

Having difficulties with hovering over a td that has a rowspan

I am encountering some challenges when attempting to hover over a td with rowspan in my HTML table. Despite searching for a solution, I have not been successful. I came across suggestions on forums that hinted at using JS/jQuery. Could someone please provi ...

htmlcsshtml-tablehover

Easily convert 100% of the height to pixels

Is there a way in HTML to convert a div's height from 100% to pixels without specifying a particular pixel value? ...

htmlcssasp.net

OceanWP Theme with a Fixed Navigation Bar

Currently utilizing the oceanwp theme, I'm aiming to create a topbar that vanishes while scrolling and have the menu smoothly transition to the topbar location with some opacity. I attempted the following code snippet: #site-header { position: fixe ...

csswordpress

What is the best way to style these CSS elements within the stylesheet?

I'm currently working on customizing a navigation menu in DotNetNuke. Although my question primarily relates to CSS syntax. Can someone please provide guidance on how to style a class that resembles the following? <tr class="mi mi0-0 id58 first"& ...

css

Mastering the Art of Stacking with FontAwesome

I am working on stacking the Soundcloud icon manually to display it within a square similar to fa-facebook-square. However, my Soundcloud icon is appearing under the square. This is the code I have so far: <div class="row"> <ul style="list-s ...

htmltwitter-bootstrapcssfont-awesome

PHP Email Styling Techniques

While working on a website, I encountered an issue with the automated email sent upon registration. The email was displaying the CSS code. $body '<span style="color:#444444;">Header</span>'; I attempted to use a code from online tha ...

phphtmlcssemailstyles