Node-Sass does not support compiling or transpiling the "@use" rule for modules

I am attempting to transpile/compile the code snippet provided on [https://sass-lang.com/documentation/at-rules/use#load-paths]

// src/_corners.scss
$radius: 3px;

@mixin rounded {
  border-radius: $radius;
}

// style.scss
@use "src/corners";

.button {
  @include corners.rounded;
  padding: 5px + corners.$radius;
}

Encountering this error from node-sass:

{
  "status": 1,
  "file": "C:/Users/path/scss_mixins/style.scss",
  "line": 4,
  "column": 12,
  "message": "Invalid CSS after \"  @include corners\": expected \"}\", was \".rounded;\"",
  "formatted": "Error: Invalid CSS after \"  @include corners\": expected \"}\", was \".rounded;\"\n        on line 4 of style.scss\n>>   @include corners.rounded;\r\n   -----------^\n"
}

Command used in my CLI:

npx node-sass -o ./dist style.scss

All software versions are up to date - node, npm, and node-sass.

Appreciate any assistance. :)

Answer №1

After some investigation, I discovered that node-sass, based on libsass, does not currently support the

@use "module";

feature.

To resolve this issue, I successfully implemented it using dart´s sass for node.

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

What's the best way to customize a partially collapsible Navbar in Bootstrap 4 to display items exactly where I need them to

Is there a way to make a Bootstrap 4 Navbar only partially collapse? I want certain items on the Navbar aligned to the right to always be visible, while the rest of the Navbar items on the left will collapse into a menu when viewed on mobile devices. The ...

`How to Optimize Node.js Performance on the IBM Cloud`

Is it possible for a Node.js application on Bluemix to be automatically scaled to utilize multiple processors, or would I need to manually enable this feature using Node's clustering API? Additionally, if clustering is implemented, will the applicatio ...

Creating numerous strings using template literals

I am looking to create multiple strings using a template literal and an array variable. For instance, a template literal allows you to replace an expression with its content in a string: var = "world"; tpl = `Hello ${var}!`; console.log(tpl); // Hello wor ...

Solve the mystery of hidden IP addresses in Node.js with the help of the DNS module

Is it possible to achieve the same result as running the command dns-sd -q a5b3ef18-2e66-4e24-91d2-893b93bbc1c1.local on Mac OSX using Node.js? It appears that the dns module in Node.js is primarily used for converting website addresses to IP addresses, no ...

Enhancing the appearance of input range sliders using before and after elements for custom styling

I'm looking to create something similar to the image linked below https://i.sstatic.net/Czef9.png Note:: The above image features a V-shaped icon, which is what I'm aiming for. Currently, I am utilizing input[type="range"]. The foll ...

Manipulating CSS rules using JavaScript/jQuery

My goal is to create a function that generates a grid based on table data. While the function itself seems to be working, I am encountering an issue where the classes applied are not resulting in any style changes. Below is a snippet of my function: $(doc ...

Using TypeScript in conjunction with Node.js

I'm currently trying to use typescript with nodejs, but I keep encountering errors. Can anyone help me troubleshoot? Here is the code snippet (assuming all necessary modules are imported): import routes from "./routes/routes"; let app = express(); ap ...

In Laravel, the text-overflow:ellipsis property fails to function properly when trying to display unescaped data

Encountering an issue with the property text-overflow:ellipsis. The ellipsis at the end of the truncated text is not showing up as expected. To maintain formatting without escaping data in ckeditor, I am using: {!! $treatment->description !!} speci ...

Poor text display quality on Internet Explorer

Are there any solutions to improve font display on Internet Explorer for Windows? font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; Check out this 100% crop comparison: Left: IE Right: FF ...

Broadcast a public message with the sender specified using Socket.io

As I dive into using socket.io, I've managed to send private messages successfully. However, I'm now curious about how to send a message to all users at once. In the code snippet below (used for testing purposes), the first user receives a privat ...

Creating a webpage with a left panel and draggable elements using JavaScript/jQuery

As someone new to Javascript/jQuery, I have been given the task of creating a web page with elements in a "pane" on the left side that can be dragged into a "droppable" div area on the right side. The entire right side will act as a droppable zone. I am u ...

Finding the current HTML page URL in Ionic 2: A step-by-step guide

Can the URL of the current HTML page be obtained and then converted to PDF using the cordova-pdf-generator package? ...

Looking for a jQuery plugin that helps with form alignment?

In a blog post comment, I came across an interesting jQuery form alignment plugin: jQuery.fn.autoWidth = function(options) { var settings = { limitWidth : false } if(options) { jQuery.extend(settings, options); }; ...

Custom configuration for loading static images using Webpack file loader

Hello, I have a folder named /images which has a sub-directory called /static containing various images. I am wondering how I can configure webpack to make these images from the images/static path publicly available at dist/images/image-name.png, while k ...

The front page is excessively tall, lacking any rationale for its lengthy design

I have noticed that my website, located at , is unexpectedly long. I am puzzled as to what could be causing this issue and although I know how to correct it, I am curious to find out what exactly is making the page scroll so far down. It's quite stra ...

Tips for manipulating the appearance of a parent element using CSS and VueJS

I'm currently working on a project where I need to loop through a set of users in order to create a table using the VueJS 'for' statement. One specific column is named "approved". If the value in this column is true, I want the entire row i ...

Leveraging $last in Angular for obtaining the final visible element with ng-show

My ng-repeat container div contains multiple images, each with a corresponding div next to it. Using $last, I can make sure only the div of the final image is visible after all images. However, I also have a filter button on the page that hides certain im ...

Encountering difficulties with running the application start script in appspec.yml because of outdated node and npm versions. Efforts to update them were unsuccessful

I am currently in the process of deploying an application on an EC2 instance using CodePipeline within AWS. Codedeploy is being utilized for this purpose. So far, I have been able to successfully retrieve the application from GitHub and build it using Code ...

What steps can I take to successfully integrate Boost into my React Native development environment on iOS?

In my current endeavor to launch a project using React Native version 0.73, I encountered an obstacle while executing pod install in the iOS directory, specifically related to the installation of Boost version 1.83.0. (node:66063) [DEP0040] DeprecationWarn ...

Using FEWER loops to create column classes on Twitter - What is their functionality?

Bootstrap utilizes various LESS mixins to create its column classes, along with other classes; .make-grid-columns() { // Common styles for all sizes of grid columns, widths 1-12 .col(@index) when (@index = 1) { // initial @item: ~".col-xs-@{index} ...