4

I came across this answer but I'm not using Nuxt.js. I'm using the Vue CLI.

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

In the official docs for Vue CLI it shows an example using Dart Sass (sass) but in the Vue Loader docs it shows an example using Node Sass (node-sass). I'd like to use just sass but am receiving errors for the missing node module node-sass. Where I can I make the config changes to use Dart Sass instead?

Dan
  • 59,490
  • 13
  • 101
  • 110
chris thomas
  • 428
  • 5
  • 15
  • 2
    I could be wrong but from memory, it's just a matter of removing the `node-sass` dependency from `package.json` and adding `sass`. You'll want to run `npm prune` too to remove the `node-sass` files from `node_modules` – Phil Apr 13 '20 at 23:23
  • @Phil I will give that a go, thank you! I originally ran 'npm i sass-loader sass' and it gave me the error off the bat but I could be wrong. – chris thomas Apr 13 '20 at 23:49
  • @Phil Got it, thank you! – chris thomas Apr 13 '20 at 23:56
  • What error was it? I think the main problem would be that both Sass implementations provide a `sass` binary so trying to run something like `npx sass` would be ambiguous – Phil Apr 13 '20 at 23:59

1 Answers1

6

It's easiest to select it from the CSS Pre-processors options when creating a new Vue CLI project with vue create.

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

Screenshot: enter image description here

Example package.json:

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

sass = dart-sass

node-sass = node-sass

Dan
  • 59,490
  • 13
  • 101
  • 110