How to setup SASS/SCSS/sass-loader in Nuxt

Question

I have a Nuxt app and I want to use the CSS pre-processor.
I installed the sass-loader fibers dependencies, but after installation, a message appears in the application console, which I presented in the image and in the code

This is code err:

 WARN  [email protected] is installed but ^4.46.0 is expected                                                                                                                                                                     17:22:44


 WARN  [email protected] is installed but ^10.1.1 is expected

     


Rule can only have one resource source (provided resource and test + include + exclude) in {                                                                                                                           17:22:46
  "use": [
    {
      "loader": "/home/sergey/all_project/pro_projects_all_language/empty/node_modules/babel-loader/lib/index.js",
      "options": {
        "configFile": false,
        "babelrc": false,
        "cacheDirectory": true,
        "envName": "server",
        "presets": [
          [
            "/home/sergey/all_project/pro_projects_all_language/empty/node_modules/@nuxt/babel-preset-app/src/index.js",
            {
              "corejs": {
                "version": 3
              }
            }
          ]
        ]
      },
      "ident": "clonedRuleSet-29[0].rules[0].use[0]"
    }
  ]
}

  "use": [
  {
  "loader": "node_modules/babel-loader/lib/index.js",
  "options": {
  "configFile": false,
  "babelrc": false,
  "cacheDirectory": true,
  "envName": "server",
  "presets": [
  [
  "node_modules/@nuxt/babel-preset-app/src/index.js",
  {
  "corejs": {
  "version": 3
  }
  }
  ]
  ]
  },
  "ident": "clonedRuleSet-29[0].rules[0].use[0]"
  }
  ]
  }
  at checkResourceSource (node_modules/@nuxt/webpack/node_modules/webpack/lib/RuleSet.js:167:11)
  at Function.normalizeRule (node_modules/@nuxt/webpack/node_modules/webpack/lib/RuleSet.js:198:4)
  at node_modules/@nuxt/webpack/node_modules/webpack/lib/RuleSet.js:110:20
  at Array.map (<anonymous>)
  at Function.normalizeRules (node_modules/@nuxt/webpack/node_modules/webpack/lib/RuleSet.js:109:17)
  at new RuleSet (node_modules/@nuxt/webpack/node_modules/webpack/lib/RuleSet.js:104:24)
  at new NormalModuleFactory (node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModuleFactory.js:115:18)
  at Compiler.createNormalModuleFactory (node_modules/@nuxt/webpack/node_modules/webpack/lib/Compiler.js:636:31)
  at Compiler.newCompilationParams (node_modules/@nuxt/webpack/node_modules/webpack/lib/Compiler.js:653:30)
  at Compiler.compile (node_modules/@nuxt/webpack/node_modules/webpack/lib/Compiler.js:661:23)
  at node_modules/@nuxt/webpack/node_modules/webpack/lib/Watching.js:77:18
  at AsyncSeriesHook.eval [as callAsync] (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:24:1)
  at AsyncSeriesHook.lazyCompileHook (node_modules/tapable/lib/Hook.js:154:20)
  at Watching._go (node_modules/@nuxt/webpack/node_modules/webpack/lib/Watching.js:41:32)
  at node_modules/@nuxt/webpack/node_modules/webpack/lib/Watching.js:33:9
  at Compiler.readRecords (node_modules/@nuxt/webpack/node_modules/webpack/lib/Compiler.js:529:11)

I tried reinstalling dependencies, reinstalling a completely clean Nuxt application, and still the problem remains.

Overlie

Answer 1

To install SASS in Nuxt, you have to run yarn add -D sass [email protected] (or npm i -D [email protected] --save-exact && npm i -D sass).

The version of sass-loader needs to be exact and set at the latest 10.x.x because the next one (11.0.0) is using Webpack5, hence being a breaking change because Nuxt2 is only running on Webpack4 as shown here: https://github.com/webpack-contrib/sass-loader/releases

IF then, you still cannot use <style lang="sass"> in your .vue components, then proceed.

---

Add this to your nuxt.config.js file

export default {
  build: {
    loaders: {
      sass: {
        implementation: require('sass'),
      },
      scss: {
        implementation: require('sass'),
      },
    },
  }
}

Here is a working repo with the latest recommended sass (dart-sass) setup working properly with this kind of code

<template>
  <div>
    <span class="test">
      Hello there
    </span>
  </div>
</template>

<style lang="sass" scoped>
div
  .test
    color: red
</style>

PS: if SASS is properly installed, then SCSS is working as good because it's basically the same thing.

---

If you have some warning on some things being deprecated like / for divison or any listed here: https://sass-lang.com/documentation/breaking-changes
You can refer to this answer for a fix: https://mcmap.net/q/827589/-use-latest-sass-with-use-in-nuxt

Microclimate

I have been writing on Nuxt for 1 year now. I have always used scss, I have a project, everything works there, but I wanted to change the concept of the application and decided to rewrite some binders, and in my empty project, when I do <style lang= "scss" scoped>< / style> - it says an error, I can also show it, but it is already different from the one I have just given. And I used the Nuxt documentation, but still nothing helped. I did as you said, I have the same error... Can you try to install a clean project and do the same thing and say the result? – Overlie

I do not doubt your qualifications) The fact is that I know how to work with SASS and SCSS, I have already worked with them for a long time, but I have an error when starting the application, I have not even written style in the component yet. And the application does not start anymore. – Overlie

I ask the messenger to show a video from the screen, what happens and when – Overlie

The profile was essentially for you to contact me. I don't know what is your setup and what you're used to but I can at least give you a working setup (present in my answer). For you to then investigate and find out where is the issue coming from on your side. @Overlie – Microclimate

what about nuxt3? – Outguard

@NtwariClaranceLiberiste not sure, didn't tried it myself. – Microclimate

I have a similar problem but fixes here didn't work please refer to my post: #74799198 – Homeopathic

Answer 2

You don't need Sass loader in Nuxt 3, just use this command to install sass in Nuxt 3:

npm install sass --save-dev

For Nuxt 2 you need the sass loader, try this for Nuxt 2:

npm install --save-dev sass sass-loader@10

Maigre

Answer 3

kissu's answer worked for me, but not right away. Finally I managed to fix the problem by downgrading the loader also followed by removing and installing again nuxt.

Schwaben

Strange that you needed to do that one. Glad it works at least! – Microclimate