browsersync fails to refresh when alterations are made in the .css files

Why is browsersync not injecting the css correctly? Here is my code:

const gulp = require('gulp'),
    sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    browserSync = require('browser-sync');

gulp.task('sass', () =>
gulp.src('./scss/*.scss')
    .pipe(sass({
        outputStyle: 'expanded',
        sourceComments:true
    }))
    .pipe(autoprefixer({
        browsers: ['last 2 versions'],
        cascade: false
    }))
    .pipe(sass())
    .pipe(gulp.dest('./'))
);

gulp.task('browser-sync', function() {
    browserSync.init(["*.*"], {
        proxy: "http://localhost/wordpress_25denoviembre"
    });
    .pipe(browserSync.stream());
});

gulp.task('default', ['sass', 'browser-sync'], function () {
    gulp.watch('./scss/*.scss', ['sass']);

});

Even though it detects all types of .html, .php, and .js files, when compiling from .scss to .css nothing happens. I am running two consoles, one for executing gulp (to compile sass) and the other for browser-sync.

Your help in solving this issue would be greatly appreciated.

https://i.sstatic.net/5mClw.jpg

Answer №2

Here are a few recommendations:

gulp.task('compile-sass', () =>

  // including return statement
  return gulp.src('./scss/*.scss')
    .pipe(sass({
        outputStyle: 'expanded',
        sourceComments:true
    }))
    .pipe(autoprefixer({
        browsers: ['last 2 versions'],
        cascade: false
    }))

    // excluding the following line
    //  .pipe(sass())

    .pipe(gulp.dest('./'))

    // additional line of code
   .pipe(browserSync.stream());
);

gulp.task('initialize-browser-sync', function() {
    browserSync.init(["*.*"], {
        proxy: "http://localhost/wordpress_25denoviembre"
    });

    // omitting the following line
    // .pipe(browserSync.stream());
});

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

Determine whether the color is a string ('white' === color? // true, 'bright white gold' === color? // false)

I am facing an issue with multiple color strings retrieved from the database. Each color string needs to be converted to lowercase and then passed as inline styles: const colorPickerItem = color => ( <View style={{backgroundColor: color.toLowerC ...

The MUI makeStyles() class has been implemented, yet the styles are not being displayed when using classList.add('class-name')

Currently, I am utilizing MUI makeStyles() to create a series of CSS classes. Within these classes, I am dynamically including and excluding one specific class to my Box element during file drag-and-drop events. The class is successfully added, as I can o ...

Struggling with html code?

Struggling with some school work and facing a challenge. I need the menu to be centered, but it's not cooperating. My teacher was no help, so I'm turning to this website for assistance. This is what I have come up with: * { background-col ...

I'm having trouble getting the second controller to function properly in my AngularJS application

I've been looking everywhere for a solution on how to implement two controllers, but I can't seem to get it working. Could there be something wrong with my HTML or could the issue lie in my script? Here is the JavaScript code: <script> v ...

Adjust the alignment of text within the <select> tag to the right in Safari browser

Is there a way to align text right in a select option tag? <select style="direction:rtl;text-align:right"> <option value="" selected="">همه</option> <option value="1">راهبر سيستم</option> <option v ...

Design a navigation bar that seamlessly incorporates an image

I am struggling to achieve a seamless header design that flows from the logo. I have experimented with aligning images within containers and using long background images, but neither method has yielded satisfactory results. Is there a reliable way to cre ...

The Google Share button may fail to be displayed correctly if it was initially hidden

Is there a solution to the issue where the Google Share button does not display properly when it is initially hidden using CSS display:none on its parent div and then shown using jQuery .show()? I am currently experiencing this problem and I'm unsure ...

Utilizing Bootstrap in Laravel to align the heights of rows in adjacent columns

I am in the process of developing a calendar application that includes a header row and a header column. The layout displays six days in columns with a fixed number of time periods per day. <div class="row"> <div class="col-md c ...

Elevated Floating Button

https://i.sstatic.net/jMT5g.png I am attempting to create a vertical floating button for my website, but the text is displaying outside of the box. CSS #feedback { height: 104px; width: 104px; position: fixed; top: 40%; z-index: 999; tr ...

Implementing a horizontal scrollbar for an AJAX datatable

Is there a way to incorporate a horizontal scrollbar into an Ajax Datatable? I attempted to use "ScrollX" :true, however, this method did not prove successful. $(document).ready(function () { $('#myDataTable1').DataTable({ "aj ...

CSS responsive design: concealing elements does not prevent the page from being displayed

Imagine a scenario where I need to display a template in two different versions based on the user's device. For instance, I have utilized the following code: <div class="desktop"> <body> Hi Desktop user </body> </div> ...

Sprockets could not locate the file for jquery.atwho

I have been attempting to integrate the jquery-atwho-rails into my application, a Rails gem designed for at.js. I have followed all the steps provided, executed bundle install, included the necessary code in both application.js and application.css, stopped ...

Text appearing in varying sizes across browsers

I need some help with a coding issue I'm facing. I have a form where one of the inputs is connected to a JavaScript function that updates a div on the page as the user types. However, I want to limit the width of this div to 900px and make sure it onl ...

Combining different HTML table borders

Here is some example code: <!DOCTYPE html> <html> <body> <h4>Creating a table with nested tables:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td> </td> < ...

Issue with my TypeScript modules TS2307: Module not found

For my latest project, I decided to use the aurelia-typescript-skeleton as the foundation. To enhance it, I created a new file called hello.ts in the src folder. export class Hello { sayHello(name:string) : string { return 'Hello ' + name; ...

Turn off HTML5 Audio

There are 4 <audio> elements on a webpage. The client has asked for them to be available sequentially. Meaning, the first audio should play, then the rest should remain disabled until the first one finishes, and so on. In addition, they want the au ...

Horizontal rule located within a table but spanning the entire width

I wrote the following code: <table> {item.awards.map((obj,i) => <tbody> <tr> <td>Name</td> <td>:</td> <td>{obj.title}</td> </tr> ...

Looking for assistance in minimizing the gap between the banner and content on my Weebly website

Currently, I am utilizing Weebly templates and working with the CSS files for my website located at www.zxentest.weebly.com. I am seeking assistance in reducing the space between the yellow banner and the faint line on either side, as well as decreasing t ...

Mastering the integration of npm and gulp for efficient module processing

Currently in the process of setting up my frontend environment, I find myself stuck trying to effectively combine node modules with gulp. Initially, I considered using bower, but after seeing a recommendation on the bower blog to use yarn instead, I decide ...

Head styles for tinyMCE

When viewing the tinyMCE example on the official website using Firefox, you may notice the editor blinking. This issue seems to only occur in Firefox, possibly due to external CSS files for the editor. I am considering adding all CSS rules directly into th ...