What is the process for utilizing Sass in Vue CLI rather than node-sass (which is the default for sass-loader)?

I found a solution, but it's specifically for Nuxt.js and I'm using the Vue CLI.

Is there any way to use dart sass instead of node-sass (default for sass-loader) in Nuxt.js?

While the Vue CLI official documentation displays an example utilizing Dart Sass (sass), the Vue Loader documentation provides an example using Node Sass (node-sass). Despite attempting to only use Dart Sass, I keep encountering errors related to the missing node module node-sass. Where should I make configuration changes to switch to Dart Sass?

cssvue.jswebpacksassvue-cli

Answer №1

If you want to make things easier, simply choose it from the CSS Pre-processors section when setting up a new Vue CLI project using vue create.

  • Manually pick features
  • CSS Pre-processors (*)

See the screenshot below: https://i.sstatic.net/UyV5W.png

Here's an example of a package.json file:

"devDependencies": {
  "sass-loader": "^7.2.0",
  "sass": "^1.22.10"
}

sass is equivalent to dart-sass.

node-sass refers to 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

"Encountering issues with vs-select functionality in Vuesax and dealing with duplicated root nodes in Vuejs

Working with vuejs 2.5.16, vuesax 3.5.7, and the webpack template from vue-cli has been a bit tricky. I noticed that when using a vs-select component in my form, the options are not showing up correctly. The list size seems fine, but all the values appear ...

vue.jswebpack

Unexpected results with mix-blend-mode difference

I am struggling with making a black text element overlap a black div while ensuring that the overlapping part of the text appears white. I attempted to use the mix-blend-mode property, but it does not seem to be working as expected. Why is this happening? ...

htmlcss

Utilizing the NODE_ENV variable in a Windows 10 npm script

I have integrated webpack into a Typescript project. Following a helpful tutorial, I created 3 separate webpack configuration files: webpack.common.js webpack.production.js webpack.development.js In the tutorial's package.json, the "scripts" sectio ...

javascriptnode.jswebpackenvironment-variablesnpm-scripts

Retrieve the data from every dropdown menu

How can I retrieve the selected values from all created selects when a button is clicked? I have attempted using both refs and v-model, but neither of them are functioning as expected. <div v-for="attribute in attributes" class="col"> {{ a ...

javascriptvue.js

Tips for achieving vertically centered text wrapping around a floating image

Describing it in words is proving to be difficult, so let me just illustrate it for you. In the following images, the horizontal lines represent the "text", the small box symbolizes the image, and the larger box encompasses the entire webpage. My goal is ...

htmlcss

"Printed documents fail to display underlined text using Bootstrap styling

Why do the codes show underlines on the webpage but not in the browser's print? This code is from the printOrder.blade.php file: <!DOCTYPE html> <html dir="ltr" lang="en"> <head> <meta charset="UTF-8&qu ...

cssbootstrap-5

Removing CSS from an Ajax combobox

When using an Ajax Combobox, I encountered a problem with the background color changing on hover. The combobox is bound to a datasource with specific conditions for defining the background color, but upon hovering over a list item, the color changes. I wan ...

cssasp.netajax

What is the best way to initially conceal content and then reveal it only after an ajax call is made?

Currently, I have a situation where content is revealed after the callback function of a .js library (typed.js) executes. Here is the script I am using: Javascript $(function(){ $("#logo-black").typed({ strings: ["Nothing^450&Co^250.^500" ...

javascriptjqueryhtmlcssajax

Arranging th tags level and at equal height within a datable using HTML and CSS

I am looking to arrange my top headers in a table so that the red square icon is always next to the first span without using absolute positioning. Is there a way to achieve this without using absolute position? table.dataTable thead span.sort-icon { ...

htmlcsshtml-tabledatatablebootstrap-5

Responsive CSS images with overlays

I need to stack two images on top of each other while ensuring they remain responsive with a percentage width and height. <div class="container"> <img src="res/bigger.png/> <img src="res/smaller.png class="icon"/> </div> ...

htmlimagecssresponsive-design

Replace the typical bootstrap text class with stylish and modern google material icons

As a newcomer to the world of javascript, I acknowledge that my approach may not be ideal... I'm attempting to modify the color of a material icon upon clicking it. Essentially, I want to toggle it on and off. The challenge lies in the code's in ...

javascriptjquerycssgoogle-material-icons

Issues arise with library functionality post-Webpack integration (SKD3)

Currently, I am in the process of developing a Sankey diagram using the SKD3 library. Everything seems to be working well when I include the necessary libraries in the usual way: <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" c ...

d3.jsnpmwebpack

Using CSS to create centered blocks

I have a list of blocks that I want to center without any margins, like the example below but margin-free. ul{ margin:0px; padding:0px } .colors{ padding-left: 50px; padding-right: 50px; } .colors li{ display: inline-block; list-st ...

htmlcss

Applying a distinct CSS style to the final entry of each list item

Is there a way for me to assign a different style for the last entries in my code? <?= $k % 2 == 1 ? 'news-figure' : 'news-figure-b' ?> ...

phpmysqlcss

Video player on website experiencing issues with playing VAST ads

Hey there! Check out this awesome site for Music Videos: (Music Videos(Player)) I've been testing different options, but if you have a better suggestion, please let me know. Any help would be really appreciated. If I can't figure it out on my o ...

javascripthtmlcss

Elements are unresponsive to scrolling inputs

My Ionic 2 input elements are not scrolling to the top when the keyboard is shown. I've tried everything I could find on Google, making sure the keyboard disable scroll is set to false. However, I still can't figure out what's causing the sc ...

javascripthtmlcsstypescriptionic2

Achieve a responsive layout by dynamically sizing child div elements to fill their parent container using percentage-based margins and

I'm having trouble getting the child divs to stretch to the parent, and I'm not sure if I need to specify a % width on #fullpage-content even though #middle is set to 76%. I seem to have forgotten... Would you like to check out this link where c ...

htmlcss

Switching the border of a div that holds a radio button upon being selected

I have a piece of code that I use to select a radio button when clicking anywhere within a div, which represents a product photo. To make it clear for the customer, I want to add a border around the selected product. Here is the initial code: <script t ...

javascriptjqueryhtmlcss

Clear backdrop with solid objects

I am trying to achieve a unique design where the body has an image background, and the main div has a semitransparent background. I want the image to be visible through the main div, but in a shaded manner. However, the traditional approach may cause every ...

htmlcssbackgroundopacity

Styling the ::selection inline with CSS allows for custom

I have a div element that I would like to customize the text selection style for. Currently, setting the style using CSS works perfectly: <div>Text text here</div> <style> div::selection { background: #FFF; color: #0 ...

htmlcsstextselectioninline-styles