Steps for setting up dart sass on Fedora 37

I'm facing difficulties while trying to install Dart Sass on my Fedora 37 system. Despite following the official instructions and watching several tutorials, I keep encountering an error.

According to the official Sass website:

You can install Sass on Windows, Mac, or Linux by downloading the package for your operating system from GitHub and adding it to your PATH. There are no external dependencies or additional installations required.

I meticulously followed the installation steps:

  1. Downloaded the appropriate Dart Sass archive for my Fedora 37 system, which was dart-sass-1.70.0-linux-arm64.tar.gz
  2. Extracted the files to the ~/opt/dart-sass directory
  3. Added the line 
    "export PATH="/opt/dart-sass:$PATH"
    to the .bashrc file to include the extracted directory in my PATH.
  4. Executed the command "source ~/.bashrc" to apply the changes

However, upon running the "sass --version" command, I encountered the following error:

qemu-aarch64-static: Could not open '/lib/ld-linux-aarch64.so.1': No such file or directory

After conducting some research and trying to install binfmt-support, the error persisted. I'm seeking assistance in understanding the cause of this error and how to resolve it so I can effectively utilize Sass.

csssass

Answer №1

...arm64.tar.gz seems fishy. Are you certain it matches your architecture? If not, run

$ uname -a

in your terminal to identify your architecture. In my case, the result is

Linux desktop 6.8.10-200.fc39.x86_64 #1 SMP PREEMPT_DYNAMIC Fri May 17 21:20:15 UTC 2024 x86_64 GNU/Linux

Therefore, my architecture is x86_64, which is typical for PCs. If your architecture matches, grab the file from https://github.com/sass/dart-sass/releases with a name ending in:

linux-x64.tar.gz

The file is somewhat hidden. Only a few options are visible on the releases page. Look for a button at the bottom that says Show all 22 assets (number may vary) to reveal all available packages.

Next, remove your current installation by doing:

$ sudo rm -rf /opt/dart-sass

and unzip the new file in /opt.

$ cd ~/Downloads
$ sudo tar -xf dart-sass-1.77.2-linux-x64.tar.gz -C /opt

If you've added /opt/dart-sass to your PATH, running the command below should show the version:

$ sass --version
1.77.2

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

Unexpected Error with Background Position Variable

Hello, I am attempting to create an animated background effect that moves up and down using the .animate() and .hover() methods in jQuery. Within my DOM, there is a div with id="#menu" containing a UL list where each item has a background positioned at dif ...

javascriptjquerycssanimation

Utilizing jQuery time intervals within a jQuery click event: A step-by-step guide

For my dropdown menu project, I am facing an issue where the menu bar is not reappearing after collapsing the dropdown. It seems that the jQuery function responsible for toggling classes within a time interval is not executing properly. Specifically, the " ...

javascriptjqueryhtmlcss

Variations in CSS display across various browsers

I'm currently facing an issue while learning web development. The expected result only appears when I preview my website on an old version of Internet Explorer, but it doesn't show up correctly when opened on Firefox or Chrome. The code I have i ...

htmlcss

Loading JS and CSS files in relation to the website root directory

When it comes to including CSS/JS files, what are the best practices for defining the file URI? Some people prefer to include files relative to the website root by specifying the full URI: <link rel="stylesheet" href="/my/path/to/css/main.css"> Thi ...

javascripthtmlcss

Obtaining two divisions that simultaneously display partials in a parallel manner

It's proving difficult to align two divs containing rendered partials side by side within a form. Strangely enough, when I replace the divs with plain text, they respond perfectly to my style changes. However, as soon as I include the render code, the ...

htmlcssruby-on-rails

What's the difference in width between Inline-Block and Float?

HTML <ul> <li><a href="#">Item #1</a></li> <li><a href="#">Item #2</a></li> <li><a href="#">Item #3</a></li> <li><a href="#">Item #4</a></li> & ...

csscss-float

Stop the container from growing in height due to column expansion

I'm facing an issue with my Vuetify two-column layout. The left column contains media with varying aspect ratios, while the right column houses a playlist. As the playlist grows in length, it extends the container, leaving empty space below the media. ...

cssvue.jsflexboxvuetify.js

Turn off Appbar padding at the top and bottom

I am looking to create a customized box within the Appbar that spans the full height, as illustrated in the image below: https://i.stack.imgur.com/CFMo0.jpg However, the default Appbar provides padding from all sides to its internal elements, leading to ...

javascriptcssreactjsmaterial-ui

Ways to center a vertically aligned SVG in relation to text using Bootstrap

After experimenting with bootstrap, I have encountered an issue where I cannot vertically center an inline SVG relative to text. Below is a simplified example showcasing this problem: <!DOCTYPE html> <html> <head> <link rel=& ...

htmlcsstwitter-bootstrapbootstrap-4

Dynamic stacking of buttons in response to user navigation choices

Is it possible to create a navigation bar with 5 buttons using CSS and JS? Here is what I am looking to achieve: Display 5 nav/button options When a user clicks on a button, the other buttons should transition or hide, leaving only the selected button vi ...

javascripthtmlcss

Create a chessboard with a border using only HTML and CSS

I recently completed a chessboard using only HTML and CSS, but I am facing a challenge as I attempt to add a frame around the board. Since I lack design skills, I am struggling to achieve this simple task. I have tried utilizing the CSS border property wit ...

htmlcss

Tips for incorporating an image into the background of a mobile device

My attempt to set an image as a background was successful on desktop, but unfortunately, it doesn't work on my phone. I have specified 'cover' as the background-size, expecting it to cover all the space on mobile as well. Here is the code s ...

htmlcssresponsive-designbackground

Is there a way to ensure that the div of my template spans 100% in width and height?

I'm attempting to make my div 100% in size but I am having trouble achieving it. Here is my code: <template> <div> <Navbar/> <Calendar/> </div> </template> <script setup> import Calendar from &apos ...

cssvue.js

Preventing scrolling in jQuery UI Draggable when using flexbox

In my project, I am looking to organize a container using jQuery UI draggable/droppable feature. Since the elements in my list are arranged in a straight horizontal line, I have utilized display: flex. This arrangement works well when adding new items to ...

javascriptjqueryhtmlcssjquery-ui

Removing a function when changing screen size, specifically for responsive menus

$(document).ready(function () { // retrieve the width of the screen var screenWidth = 0; $(window).resize(function () { screenWidth = $(document).width(); // if the document's width is less than 768 pixels ...

javascriptjquerycss

Tips for designing a navbar specific to a profile section

I am currently working on an angular application with a navigation bar composed of anchor tags. When the user logs in, I have an ngIf directive to display my profile icon with dropdown options. However, I am facing challenges in styling it correctly. I aim ...

cssangular

How to retrieve the width of a document using jQuery?

Having a strange issue with determining the document width using $(document).width() during $(window).load and $(window).resize. The problem arises when the browser is initially full screen and then resized to a narrower width, causing content to require ...

javascriptjqueryhtmlcss

What is the best way to enlarge a navbar from the top using Bootstrap 5?

I have a button labeled "MENU" at the top and a logo image below it. Currently, the menu expands from the bottom of the button. I would like it to expand from the top instead, and when the menu is expanded, the button should be under the navigation list, n ...

htmlcssbootstrap-5

Integrating blade code within blade code

Struggling to craft a button using the Form builder. {!! Form::button('<span style="color: {!! $colour[$i] !!}" class..') !!} The specific details of the button don't matter, all I wanted was to adjust the font color to $colour[$id]. Th ...

phphtmlcsslaravel-blade

Is it possible to switch between Jquery and CSS?

Using PHP, I have created a CSS file that enables me to easily adjust the color of various elements. Is there a way for me to regenerate the stylesheet and apply it to the DOM using JQuery? For example: <?php if (isset($_POST['mycolor'])){ $ ...

phpjquerycss