Having trouble getting indented Sass syntax to work with node-sass and gulp-sass?

With the introduction of Libsass 2.0, the indented syntax became available to libsass users. However, I have been facing issues trying to get it to work with node-sass and gulp-sass. Currently, all components are updated to their latest versions:

node-sass: 0.93
gulp-sass: 0.7.2
gulp: 3.8.2

While this configuration successfully compiles .scss and even .sass files using bracket syntax, it fails to compile the indented syntax. Has anyone managed to compile the indented syntax using node-sass and gulp?

Here is a snippet from my gulpfile.js:

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function() {
    return gulp.src('./sites/all/themes/nsfvb/sass/screen.sass')
        .pipe(sass({
            includePaths: require('node-neat').includePaths,
            errLogToConsole: true
        }
        ))
        .pipe(gulp.dest('./sites/all/themes/nsfvb/css'));
});

gulp.task('watch', function() {
    gulp.watch('./sites/all/themes/nsfvb/sass/*.sass', ['sass']);
});

gulp.task('default', ['sass', 'watch']);


Error encountered when running the default task:

error: invalid top-level expression

Answer №1

Latest response:

To utilize the indented syntax (.sass) as your main file, simply use sass({indentedSyntax: true}).

sass({indentedSyntax: true})

Older response

The solution can be found at: https://github.com/dlmanning/gulp-sass/issues/55#issuecomment-50882250

By default, compiling sass files does not work. However, there is a workaround. If you pass sourceComments: 'normal' as a parameter, the compilation will work. This is due to a specific condition that alters how files are handled: https://github.com/dlmanning/gulp-sass/blob/master/index.js#LL23-L27

View the code example here: https://github.com/chrisdl/gulp-libsass-example/blob/master/gulpfile.js

const gulp = require('gulp');
const sass = require('gulp-sass');

// Run using "> gulp sass" in the terminal.
gulp.task('sass', function () {
    gulp.src('./sass/main.sass')
        .pipe(sass({sourceComments: 'normal'}))
        .pipe(gulp.dest('./css'));
});

Important Note

If you encounter any issues with this code snippet, refer to the following quote and problem.

Using this workaround may lead to discarding any changes made to the file content earlier in the gulp pipeline (e.g., by previous plugins) - JMM.

https://github.com/dlmanning/gulp-sass/issues/158

Answer №2

Just wanted to provide an update on this issue, the reference for gulp-sass currently states:

If you prefer using the indented syntax (.sass) as your main file, utilize sass({indentedSyntax: true}).

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

Encountering issues while trying to execute npm and node commands within Visual Studio Code

When I attempt to execute node commands in a command window, such as ng serve -o, everything works fine. However, when I try to do the same in VS Code, I encounter the following error message: ng : The term 'ng' is not recognized as the name of ...

To ensure that all URLs in Node JS have a trailing "/" added, a simple check can be implemented to verify its presence and append

Is there a way to append a "/" at the end of all URLs in Node.js / Express if one is not already present? Any advice is greatly appreciated. ...

Elements beyond the bootstrap container

Currently, I am utilizing Bootstrap for my layout design. The specific task at hand is to have two items positioned outside of the container with borders extending all the way to the edge of the screen. To achieve this, I attempted nesting a container with ...

The issue with the CSS background gradient is that it fails to completely cover the entire

Despite attempting several solutions recommended in similar questions, I am still unable to resolve the issue. Using the CSS background gradient generator at Ultimate CSS, I found that the gradient only extends halfway down the page on www.ncentertain.com ...

When making a post request, req.body may be null

I am attempting to log the body content of a request to the console within a post function. Here is the code snippet: export const createOffering = async (req, res) => { const offering = req.body; const newOffering = new Offering(offering); console.log( ...

The execution of events.js failed at line 136, causing an unhandled 'error' event to be thrown

Why do I keep getting events.js:136 throw er; Unhandled 'error' event and how can I fix it? I have already tried reinstalling both nodejs and mongodb, but the error persists. package.json { "name": "bookstore", "version": "1.0.0", "description" ...

Error accessing / using Roots - CoffeeScript: Cannot GET

While using Roots for developing an app, I encountered an issue after running the roots watch command. The compilation was successful and it opened the localhost:1111 page, but displayed the error: Cannot GET / I have checked my app.coffee file, but none ...

Navigate pages efficiently with Expressjs pagination redirection

Currently, I have set up a pagination system where my feed is displayed using the index route path /, and additional pages can be accessed by using /feed/:pageNumber. While the pagination works fine in delivering the next and previous records, I am facing ...

Bringing in an Angular2 project to the Phoenix framework

Currently juggling two interconnected projects - a Phoenix based website and API, along with an Angular2 application utilizing the API from Phoenix. My goal is now to integrate the Angular2 application into the Phoenix project, but I'm unsure of the b ...

Calling Node.js middleware externally results in bypassing its functionality

As a newcomer to Express and Node, I'm facing what seems like a very basic issue that is causing me quite a bit of confusion. Any assistance in resolving this problem or guiding me on how to troubleshoot it would be greatly appreciated. Issue var ...

What is the correct way to transfer session variables to an email?

Currently, I am working on a project that involves extracting and sending data stored in the session variable $_SESSION['favourites']. To achieve this, I initially utilized the print_r function with the parameter set to true. The output generate ...

Swapping out one variable for another

After tweaking my code a bit, I'm still struggling to get it right. User input: !change Hi var A = "Hello" if (msg.content.includes ('!change')) { A = msg.content.replace('!change ', ''); } msg.send(A); //the change ...

Saving an array file in Node.js using the fs module without using any separators

I am facing an issue while trying to save an array to a file. I always seem to get a ',' separator in the new file which I assume indicates a new row in the array. For example, if I have a file like this: this is file with text to check I read ...

Running AngularJS on a personal server

I recently embarked on creating a basic web application using AngularJS. You can find the files for this project here. To get it up and running, I installed node.js and ran the command "npm install -g http-server" on Windows 10 command prompt. After naviga ...

What is the best way to implement the hamburger-react-menu exclusively for mobile or small screen users?

Looking to implement a mobile menu in my component, specifically for mobile devices. The menu should display options like Home, Furniture Chair... when clicked on the hamburger icon. I have the hamburger-react-menu package installed but unsure whether to u ...

Adapting the colors of the MUI Switch component

I am currently utilizing the switch component from MUI and I am looking to change the styling between two different colors. <Switch color={dataType === "expenses" ? "error" : "secondary"} onChange={handleOnSwitch} che ...

CSS transitions do not function properly in Mozilla browsers

I have been attempting to create a hover animation transition on my website. It seems to work fine in Opera and Chrome, but not in Mozilla Firefox. Can anyone provide guidance on how to fix this issue? Here is the code I am currently using: HTML <a hr ...

HTML 5 functions properly when loaded directly as a .html file, but encounters issues when hosted on either a Django or Node

I'm having trouble getting a video to play on a webpage. Initially, I followed a standard example I found online by using the following code: <video src='video.mp4' controls></video> When I open the .html file in Safari and dou ...

Exploring the possibilities of repetition in puppeteer

I'm looking to extract certain elements and receive updates every 15 minutes, however I'm unsure how to create a loop for this situation: const totalCases = await page.$eval('.maincounter-number span', element => element.innerHTML); ...

Master Checkbox in HTML Table Not Functioning for Selecting/Deselecting All Items

https://i.sstatic.net/RKWaC.png I'm facing an issue with my code that allows me to select and deselect multiple rows in a table. Specifically, I'm struggling with implementing a SELECTALL/DESELECTALL feature using a master checkbox. You can vie ...