What is the preferred method of compiling Sass: utilizing the Live Sass Compiler extension in VS Code, or setting up and running Sass through npm? (Including guidance on transitioning from node-sass to dart-sass)

As I delve into an online course focused on Advanced CSS and Sass, I have noticed that the techniques being taught seem a bit outdated.

The course heavily relies on node-sass in its dependencies, which is now considered deprecated. An alternative solution is to switch to Dart-sass (I will outline the steps for this later on, maybe it could be helpful for someone else :))

An additional option is to utilize the VS Code Extension "Live Sass Compiler". This seems to be a popular choice among users.

However, I am curious about the benefits and differences between these options. For instance, I encountered some issues with the extension yesterday but switching to dart sass as dependency resolved the problem. It may have been a mistake in my code, but it has left me pondering this question, which I believe others may face in the future.

PS: This happens to be my first inquiry here, please be kind if I have made any errors :D

For those keen on transitioning from node-sass to dart-sass, here are the steps (these were the steps I followed in the course):

  1. Install dart sass using this command in the terminal: npm i -D sass
  2. Edit your scripts by replacing node-sass with sass (in package.json)
  3. Change the -w in your watch:sass script to --watch (in package.json)
  4. If needed, you can uninstall node-sass using npm uninstall node-sass
cssnode.jsnpmsasslive-sass-compiler

Answer №1

I'm not entirely sure which tutorial you're referring to. While I may not be the most experienced when it comes to front-end development, I personally believe that using Sass as a CSS preprocessor might not be the optimal choice for production at this time.

However, since you're interested in learning how to implement sass, let me walk you through a process similar to setting up React with npx create-react-app.

You were correct in choosing to use dart-sass instead of sass. To do so, simply run this command: npm install --save-dev sass. It seems like you've already attempted this step based on your question.

Next, add a new script to the scripts section of your package.json file: 

"sass" : "sass src/Sass:src/Css --watch --no-source-map"
and you should be good to go.

In my personal opinion, I find it more stable to implement Sass via npm rather than relying on a Visual Studio Code plugin. However, if you're just exploring or studying, feel free to experiment with both methods.

Answer №2

To ensure you are using the most up-to-date version of Dart SASS with 'Live Sass Compiler,' it is important to pay attention to the version you are using. The older, more popular version has not been supported for years and does not work with Dart SASS.

Fortunately, there is a forked version that is supported and can be used with the same settings as the original.

In terms of NPM and Live Sass Compiler: both are JavaScript versions of Sass. While they may not be as fast as installing SASS directly on your system, the difference in speed between the JavaScript versions is minimal. Therefore, the preferable choice between NPM and Live Sass Compiler would be to use Live Sass Compiler (the forked version) as it is integrated into the editor and easier to use directly from there.

If speed is a priority for you, it is recommended to install the original version. This process might sound daunting, but there is a VS Code Extension available that makes it easy to use the original installed version directly within VS Code.

For more detailed information:

How to install SASS directly onto your system:
https://sass-lang.com/install

Information about the mentioned VS Code extension:

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 if a div element is already using the Tooltipster plugin

I have been using the Tooltipster plugin from . Is there a way to check if a HTML element already has Tooltipster initialized? I ask because sometimes I need to update the text of the tooltip. To do this, I have to destroy the Tooltipster, change the tit ...

javascriptjqueryhtmlcsstooltipster

Searching for files in directories and subdirectories using Node.js

Although I found this solution, it seems to be quite slow. I am looking for the quickest way to traverse directories without using npm packages. Any suggestions? ...

javascriptnode.jssearchnpmfilesystems

Utilizing CSS float with dynamic height

Is there a way to achieve height:auto; for a parent element even when child elements are using float:left; or float:right? Solution for the Parent Element: #parent { width:100px; height:auto; padding-bottom:10px; background:#0F0; ...

htmlcss

Encountering an error in Nodejs where it is unable to access the properties of an object due to it being undefined

Hello, I am currently working on creating a todo app using Node and Express. The frontend is functioning correctly, but I'm encountering an error in the terminal. Despite passing the todo object, it is displaying 'id' as undefined. Here is ...

node.jsejs

What is the best way to indicate alternative dependencies in NPM?

When stating the requirements of a Debian package, you have the option to use syntax such as exim | mail-transport-agent to specify that your package requires either exim or mail-transport-agent, without any preference between the two. I am interested in ...

node.jsnpmdependenciesalternate

`Text-overflow ellipsis should function consistently across both Firefox and Chrome browsers`

A design has been created to showcase captions for articles and their respective statuses. The article name box has a fixed width, with text-overflow:ellipsis applied to trim excessively long names. Additionally, a light grey dotted line is added at the en ...

htmlcssgoogle-chromefirefoxellipsis

The server's file URLs are modified within the page source of a WordPress site

I've been attempting to integrate Adsense code into a WordPress blog at demonuts.com. I placed the Google code in the TEXT WIDGET provided by WordPress. However, upon running the website, I noticed that the URLs for .js, .css, or .png files are being ...

javascriptphphtmlcsswordpress

Performing numerous asynchronous MongoDB queries in Node.js

Is there a better way to write multiple queries in succession? For example: Space.findOne({ _id: id }, function(err, space) { User.findOne({ user_id: userid }, function(err, user) { res.json({ space: space, user: user}); }); }); It can g ...

javascriptnode.jsmongodbasynchronous

Utilizing global NPM modules with Grunt Deploy instead of local installations

As a newcomer to npm and grunt, I am facing challenges with setting up our build server to utilize Grunt for generating output files in our project. The issue arises from the fact that due to Windows' 260 character path limit in TFS source control, we ...

node.jsmodulenpmgruntjs

What could be causing this code to malfunction on a mobile device?

I am struggling to make this drag and drop function work on mobile devices. Despite implementing the code, it doesn't seem to function properly when accessed on my mobile phones. Here is the snippet of the code: copy = 1; $('.dragArea img&apo ...

javascripthtmlcss

Issue encountered during installation of [email protected] on a Windows 10 operating system

Encountered an error during the installation of [email protected] on a Windows 10 system. npm ERR! code ETARGET npm ERR! notarget No matching version found for <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ee998b8cddc38d8 ...

node.jsnpmethereumweb3js

Tips for transmitting an array of Objects to AngularJS

Summary I'm curious about how I can successfully send the following array of objects from NodeJS to an AngularJS app. var players = [ Footer: { username: 'Footer', hp: 200, exp: 1 }, Barter: { username: 'Barter', hp: 200, e ...

javascriptarraysangularjsnode.js

Simple method for creating a custom webfont using .png images

One of the designers in our team has given me an icon set in the form of .png files (each in 1x and 2x resolution) that I am considering converting into a webfont. Do you have any recommendations on the best way to accomplish this task? ...

cssiconswebfonts

Concealing div containers and eliminating gaps

Looking for a way to filter div boxes using navigation? Check this out: <ul> <li><a href="javascript:void(0);" data-target="apples">Appels</a></li> <li><a href="javascript:void(0);" data-target="bananas">Ban ...

javascriptjquerycss

Implementing Node.js with Express to handle app.get requests that include multiple query parameters

I am trying to utilize the Yelp API with the following route: app.get("/yelp/term/:term/location/:location", yelp.listPlaces) However, when I send a GET request to http://localhost:3000/yelp?term=food&location=austin, An error occurs stating Canno ...

node.jsexpressgetquery-string

What is the proper method to restrict a function to execute exclusively on the frontend following authentication on the backend?

My React frontend currently features two buttons—one for authentication and the other for displaying data once authenticated. frontend: const auth = async () => { window.open("callbackApiRouteOnBackend") } const displayData = async () ...

node.jsreactjsexpressauthenticationoauth-2.0

Implementing CSS styles to Iframe content

I have written the following code snippet to display an iframe: <iframe scrolling='no' frameborder='1' id='fblike' src='http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.XYZ.com%2F&amp;send=false& ...

phpjavascriptjquerycssfacebook-like

Customize Material-Table: Adjusting Detail Panel Icon Rotation upon Row Expansion

I've made a modification to the layout of the detail panel icon (mui ChevronLeft) so that it now appears on the right side of the table by using the options={{detailPanelColumnAlignment: "right"}} property. TableIcons : DetailPanel: for ...

cssreactjsmaterial-uimaterial-table

Minimum width of Angular Material's mat-menu

I am looking to create a compact Material mat-menu using Angular 15. Below is the code I have: <mat-menu #flagMenu="matMenu"> <button mat-menu-item> <img src="assets/flags/en.png" class="flag"/> ...

cssangularangular-material

Error encountered in MochaTest - UnhandledPromiseRejectionWarning: The function 'done' is not recognized as a valid function

Currently, I am conducting a test to create a user in a MongoDB using Mocha. Here is the code snippet for the test: The primary issue I encountered while running 'npm test' are as follows: 1. The terminal freezes and never completes the test. 2. ...

mongodbnpmmocha.js