I am having trouble compiling sass in VS Code using the sass --watch command

I've encountered an issue while trying to compile sass through the terminal. Despite having already installed node.js and successfully using Live Sass, I consistently receive the following error message:

sass : The term 'sass' is not recognized as the name of a cmdlet, function, script file, or operable program.
Check the spelling of the name, or if a path was included, verify that the path is correct and try again.
At line:1 char:1
+ sass -watch scss:css
+ ~~~~
    + CategoryInfo          : ObjectNotFound: (sass:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException

Additionally, I'm looking to incorporate @use, which is currently unsupported by the Live Sass compiler. Could there be something amiss in my process? Is there perhaps another dependency that needs to be installed? I have already ensured the installation of Sass through npm install sass.

cssvisual-studio-codesasslive-sass-compiler

Answer №1

Keep in mind: there are various methods to integrate SASS with VS Code. It is recommended to utilize the latest version that supports Dart SASS. To set it up using NPM, refer to the following:

Would you prefer using the Live Sass Compiler (VS Code extension) or installing and running Sass via npm? (+ tips on transitioning from node-sass to dart-sass)

Additionally, here's guidance on incorporating SASS by adding a VS Code Extension which may enhance your experience:

Troubleshooting compilation errors caused by @use in Live Sass Compiler

Answer №2

There are two ways you can proceed:

  1. First, you can attempt a global installation.

    Use the command: npm install -g node-sass

  2. Alternatively, you can add the following to your package.json file:

    "devDependencies": {
 "node-sass": "4.5.0"
 },
"scripts" : {
   "node-sass": "node-sass --output-style compressed -o dist/css src/scss"
}

    Once that is done, execute the following commands:

    npm i; npm run node-sass;

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

Disabling the scrollTop() effect following a click event with onClick()

Utilizing the scrollTop() event to toggle the visibility of a div at a specific position and also using the onClick() event to permanently hide the div. While the events are functioning properly, an issue arises when scrolling the page causing the div to r ...

javascriptjqueryhtmlcss

Use jQuery to dynamically alter color based on conditional statements

What could be causing the background color not to change to green? var id; id = setInterval(changeColor, 1000); function changeColor(){ var elem= $("#target"); var color = elem.css('background-color'); if (color == &apos ...

javascripthtmljquerycss

improving the resolution of images on iPhone 4 from 72ppi to 326ppi

I've been exploring ways to improve the quality of buttons in my mobile design. Currently, my navigation buttons are in a 72ppi PNG sprite and I also have another set at 326ppi. I've heard that iPhone4 can automatically choose the higher resoluti ...

iphonehtmlcss

Experimenting with media queries but struggling to make them function properly

I am relatively new to CSS and I am experimenting with media queries. Despite following advice on various Stackoverflow posts and other websites, I am unable to make them work. My goal is simple - to change the color of boxes when the screen width falls be ...

htmlcssmedia-queries

Steps for accessing an image from the static folder in a Python-Django application

I am currently working on a portfolio website project where I am using html, css, js, and django. However, I am facing an issue with loading an image from the assets folder within the static directory. Here is a snippet of the template code causing the pr ...

cssdjangodjango-templatesdjango-staticfiles

Customize your Jquery UI Calendar with Changing Background Images for Each Month!

How can I change the background of jQuery UI datepicker based on the selected month? I have created 12 classes, each representing a month, and the selected month already has the background. I tried using "onChangeMonthYear: function(year, month, inst) { ...

javascriptjqueryhtmlcssjquery-ui-datepicker

Creating a CSS full-width navigation menu

Recently, I came across a menu code on the web that seemed great. However, I wanted to make my menu responsive and full width. Since I am new to CSS and HTML, adjusting the menu code has been a bit of a challenge for me. .menu, .menu ul { list-style: ...

javascripthtmlcss

The horizontal rule element is not displaying

My <hr> element seems to be hidden. This is the HTML code: <div id="line"><hr /></div> And this is the CSS code: hr { border: 0; width: 96%; color: #FFFF00; height: 1px; } #line { float: left; width: 73 ...

htmlcss

Instructions on adjusting the height of a flexbox container to utilize the available space

I am facing a challenge in grasping the interaction between flexbox containers and other elements on a webpage. When I have only a flexbox on my page, everything works smoothly. However, when I introduce other elements, things start acting strangely. It se ...

cssflexbox

CSS Dilemma: Font Refusing to Change

Hey everyone, I'm new to web development and currently building a basic website on my computer. However, I'm facing an issue where the font I want to use is not changing. Both my HTML and CSS files are located in the correct folder and I am confi ...

htmlcss

What is the best way to position elements with CSS?

I need help aligning the arrows and images on the same line. Can anyone guide me on how to do this? (I'm using html5boilerplate). Desired Layout: Current Layout: Existing Code: HTML: <div id="linkbar"> <a><img src="./img/ar ...

csshtmlhtml5boilerplate

Position the div in the center and enhance the function to dynamically adjust when the user attempts to resize the window

var windowHeight = $(window).height(); var windowWidth = $(window).width(); var scrollTop = $(window).scrollTop(); var scrollLeft = $(window).scrollLeft(); jQuery.fn.center = function () { this.css("position","absolute"); this.css("top", Math.max( ...

javascriptjquerycss

npm is unable to install the package called 'node-sass'

So, I'm running a project with npm start and suddenly encountering the same error in multiple components: Module build failed: Error: Cannot find module 'node-sass' Frustrated, I decide to run 'npm install node-sass', only to be ...

node.jsangularnpmsassnpm-install

The size of the elements inside a div should be proportional to its parent div

I am struggling with sizing elements within a div. I have set the max-width to 40% and max-height to 25%, and inside is an image that I want to be 80% of its parent div. Here is the code snippet for reference: <div className="inputbox-container&qu ...

htmlcsssass

How can you easily center content vertically on a web page?

There has been plenty of back-and-forth regarding this issue, with proposed solutions ranging from pure CSS to pure HTML. Some can get quite complex, involving deeply nested divs and intricate CSS rules. I'm looking for a simple and uncomplicated answ ...

htmlcss

What is the best way to ensure that my website's elements adjust automatically to different screen sizes?

Recently, I encountered a small snippet of HTML code with the main focus being an h2 element. #top-warning{ justify-content: center !important; display: flex; width: 100%; margin-top: 5vw; letter-spacing: 3px; font-family: "Penguin Regular ...

htmlcss

Assistance needed in keeping an image with absolute positioning CSS fixed to the top left corner of the browser

Looking for some CSS help as a beginner here! I've been trying to position a transparent PNG image over a centered table, but it seems stuck in the upper left corner of the browser. Absolute positioning should give me freedom to move it around, right? ...

csshtmlabsolute

What is the best way to incorporate modal window parameters into this code snippet?

JavaScript function: function loadBlockEditor(block, username) { var blockInfo = $.ajax({ url: "in/GameElement/BlockEditor.php", type: "GET", data: 'block=' + block + '&nick=' + username, dataType: "html" }); b ...

javascriptjquerycss

Issues arise when attempting to smoothly scroll to an anchor point in a webpage

While working on my website, I have encountered a challenge. The issue arises when dealing with multiple div items. Upon scrolling slightly, the entire page focuses on the div with a height of 100vh, which works perfectly fine. However, my attempts to ...

javascripthtmlcssscroll

Focusing on a particular iframe

I am currently using the "Music" theme from Organic Theme on my WordPress site and have inserted this code to prevent SoundCloud and MixCloud oEmbeds from stretching the page width: iframe, embed { height: 100%; width: 100%; } Although the fitvid ...

javascriptcsswordpressiframe