Sass loader vue ошибка

I’m using VueJS with the framework VuetifyJS (v2.0.19). I’m getting this error after running npm run serve:

Sass Loader has been initialised using an options object that does not
match the API schema.

What I tried:
I’ve deleted the node_modules folder and reinstalled/updated all npm packages and node.js to the latest stable version.

Full error message:

 error  in ./node_modules/vuetify/src/components/VRangeSlider/VRangeSlider.sass

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
 - options has an unknown property 'indentedSyntax'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (/home/do/Desktop/A/Projects/Ral/AppCLI3/node_modules/sass-loader/node_modules/schema-utils/dist/validate.js:50:11)
    at Object.loader (/home/do/Desktop/A/Projects/Ral/AppCLI3/node_modules/sass-loader/dist/index.js:36:28)

 @ ./node_modules/vuetify/src/components/VRangeSlider/VRangeSlider.sass 4:14-208 14:3-18:5 15:22-216
 @ ./node_modules/vuetify/lib/components/VRangeSlider/VRangeSlider.js
 @ ./node_modules/vuetify/lib/components/VRangeSlider/index.js
 @ ./node_modules/vuetify/lib/components/index.js
 @ ./node_modules/vuetify/lib/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.2.115:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./node_modules/vuetify/src/styles/main.sass

My package.json:

  {
  "name": "app",
  "version": "0.1.0",
  "private": false,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.2.1",
    "fibers": "^4.0.1",
    "firebase": "^7.0.0",
    "material-icons": "^0.3.1",
    "register-service-worker": "^1.6.2",
    "vue": "^2.6.10",
    "vue-flickity": "^1.2.1",
    "vue-router": "^3.1.3",
    "vuetify": "^2.0.19",
    "vuex": "^3.1.1"
  },
  "devDependencies": {
    "@mdi/font": "^4.4.95",
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-plugin-pwa": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "@vue/eslint-config-prettier": "^5.0.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^6.5.1",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-vue": "^5.2.3",
    "material-design-icons-iconfont": "^5.0.1",
    "node-sass": "^4.12.0",
    "prettier": "1.18.2",
    "sass-loader": "^8.0.0",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.2",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "vue-cli-plugin-vuetify": "^0.6.3",
    "vue-loader": "^15.7.1",
    "vue-template-compiler": "^2.6.10",
    "vuetify-loader": "^1.3.0",
    "webpack": "^4.41.0",
    "webpack-cli": "^3.3.9"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/prettier"
    ],
    "rules": {
      "no-console": "off"
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

How to fix this issue?

С помощью Vue-CLI разворачиваю проект. Все норм.
Устанавливаю pug (npm install -D pug pug-plain-loader). Все норм. Поддерживается синтаксис pug в .
Затем устанавливаю scss (npm install -D sass-loader node-sass). Руководствовалась этой статьей. Все нормально до того момента, как я пытаюсь его использовать так:

<style lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Вот ошибка при пересборке проекта:

ERROR  Failed to compile with 1 errors                                                                                                                                                  15:22:19

 error  in ./src/App.vue

Syntax Error: D:OpenServerdomainsvue-scss-pug-3node_modulessass-loadernode_modulesschema-utilsdistutilhints.js:16
  const currentSchema = { ...schema
                          ^^^
SyntaxError: Unexpected token ...


 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-357 13:3-17:5 14:22-365
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8083 webpack/hot/dev-server ./src/main.js

Возможно, нужно что-то еще прописать в файл конфигурации webpack?
Файл конфигурации webpack.base.conf.js:

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

const createLintingRule = () => ({
  test: /.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
})

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /.(png|jpe?g|gif|svg)(?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      },
      // это правило будет применяться к обычным файлам `.scss`
      // А ТАКЖЕ к секциям `<style lang="scss">` в файлах `.vue`
      /* {
        test: /.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      } */
      {
        test: /.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              data: `
                @import "@/assets/scss/variables.scss";
              `
            }
          }
        ]
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}

Мой package.json:

{
  "name": "vue-scss-pug-3",
  "version": "1.0.0",
  "description": "A Vue project with scss & pug",
  "author": "Виктория",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  },
  "dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^8.2.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "eslint": "^4.15.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.0.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.1.2",
    "node-sass": "^4.14.1",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "pug": "^3.0.0",
    "pug-plain-loader": "^1.0.0",
    "rimraf": "^2.6.0",
    "sass-loader": "^10.0.2",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

Подскажите, в чем проблема? Уже замучалась, проблема повторяется неоднократно.

P.S.:
после удаления Node.JS (удалила версию установленную НЕ через nvm), ошибка поменялась. Теперь ругается:

WAIT  Compiling...                                                                                                                                                                      11:17:27
 95% emitting

 ERROR  Failed to compile with 1 errors                                                                                                                                                  13:49:49
 error  in ./src/App.vue

Module build failed: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
    at validateString (internal/validators.js:120:11)
    at Object.join (path.js:375:7)
    at getSassOptions (D:OpenServerdomainsvue-scss-pug-3node_modulessass-loaderdistutils.js:160:37)
    at Object.loader (D:OpenServerdomainsvue-scss-pug-3node_modulessass-loaderdistindex.js:36:49)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-357 13:3-17:5 14:22-365
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

Cannot find module sass is an error that occurs when your project does not have the Sass library as a dependency. Irrespective of your project, this error can catch you off guard; this article will help you fix it and prevent it in the future.

What you’ll learn in this article will make you a better developer, and you can pass this on to your colleagues. Now, open your project that’s showing the error, and let’s get you back on track.

Your project cannot find the sass module because of the following:

• You want to dockerize your React application
• You have a fresh installation of Laravel Mix
• You deployed Sass as a dev dependency
• You are building your application with Next.js
• You want to install Sass in your Angular project

Other reasons include that you want to import CSS/SCSS files into your TypeScript project, you did not install Nuxt.js project dependencies or if you have a new “Webpack + Vue” loader setup.

– You Want to Dockerize Your React Application

A quick setup of your React application will work on your computer if your code is valid. Not only this, it must have all the dependencies in “package.json”. But, an error will occur if you try to deploy your project on Docker; also called dockerization. That’s because you need to prepare your project to work online as it is on your computer.

If you don’t do this, that’s when you see “cannot find module ‘sass’ require stack:” in your error messages. This message is telling you that your project does not have Sass as a dependency. At the same time, it contains Sass files.

– You Have a Fresh Installation of Laravel Mix

A fresh installation of Laravel Mix will need the Sass module; without it, you’ll get an error. This will happen if you try to use the “X.sass()” function; where X is a reference to the “laravel-mix” library. This error occurred because “laravel-mix” will need “sass-loader” to compile the Sass files in your project. At the same time, this “sass-loader” requires that you install the sass module in your project.

– You Deployed Sass as a Dev Dependency

In a situation where you’re working with Sass on your local machine, everything will work. That’s because you’ll have all your development dependencies under “devDependencies” in “package.json”.

Now, before you deploy your application, you should move some dependencies to “dependencies” in “package.json”. Failure to do this will result in an error if your project contains code that will need these dependencies.

One such example is the Sass module, which allows you to use Sass in your project. You can place it under “devDependencies” in package.json while you code. If you don’t specify it as a dependency when you deploy to a service like Heroku, you’ll get an error.

– You Are Building Your Application With Next.JS

If you’re using Next.js for your application, you can use Sass, which allows you to simplify your CSS code. But, behind the scenes, Next.js needs the Sass module to process your Sass files (“.scss”). Without it, you’ll get an error because there is no way it can compile your Sass to regular CSS. What’s more, if you’re on a development machine, you cannot dismiss the error; you have to fix it.

– You Want To Install Sass in Your Angular Project

A disruption of your Angular build process can lead to unwanted situations and hours of debugging. The first thing you’ll try is to install Sass via npm, but this results in an error. This happens because, in computers, unwanted disruptions can lead to damaged files. The same applies in this situation; here, it’s a sign something is wrong with your Sass module.

– You Want to Import Css/Scss Files Into Your Typescript Project

By default, TypeScript only recognizes “.ts” and “.tsx” files; anything else will result in an error. If you’d like to use Sass files, you’ll have to tell TypeScript about them. As it stands, you’ve not done that and that’s why you’re getting the error in your TypeScript project. It’s a way of TypeScript saying: “I don’t recognize this file, so I can’t work it”.

– You Did Not Install nuxt.JS Project Dependencies

When you’re building your application using Nuxt.js, always install your project dependencies. This has many uses; first, it simplifies your workflow and second, it prevents errors. Now, if you have Sass in your project, it can work fine in development. But, if you don’t add it as a dependency in “production”, you’ll notice a “module build failed” error.

– You Have a New “Webpack + Vue” Loader Setup

If you have the “Webpack + Vue” loader, it’s easy to get tripped by the “cannot find sass module” error. You’ll notice this when you add the HTML “<style>” tag to a “.vue” file, and then you write some Sass code within it.

Afterward, you’ll get an error that it “cannot resolve sass-loader”. This error means the following: your project does not have “sass-loader” and the Sass library.

How To Fix the “Cannot Find Sass Module” in Your Project

You can fix the “cannot find sass module” using any of the following methods:

• Updating dockerfile and “package.json”
• Clear npm cache and install Sass
• Move Sass to “dependencies” in “package.json”
• Manual installation of Sass in Next.js
• Force the installation of “node-sass”
• Allow TypeScript to recognize “.scss” files

Some less commonly known methods include installing dependencies before starting your node server and installing “sass-loader” and “node-sass” in Vue.js.

1. Update Your Dockerfile and “package.json”

An update to your dockerfile and “package.json” will let your project find the Sass module. The following shows you how to go about it:

• Add the following without quotes to your dockerfile: “RUN npm install -g sass”
  • This allows the automatic installation of Sass when you build your Docker image.
• Update the “dependencies” section of your “package.json” with the following: “sass”: “version number”.
  • Where the “version number” is something like “^5.0.0”.
• Add the following in the “react scripts” section: “scss”: “sass –watch scss -o css”

2. Clear Npm Cache and Install Sass

A forceful clearance of the npm cache and a clean installation can fix the Sass error in Laravel Mix. The following is how to do it:

• Open your terminal or command prompt.
• Type the following commands without quotes and hit the “enter” key on your keyboard:
  • “npm cache clear –force”
  • “npm install sass”

The first command will clear the npm cache on your system, while the second will install Sass.

3. Move Sass to “Dependencies” in “package.json”

Moving Sass to “dependencies” when you deploy your application is a fix for the “cannot find module ‘sass’ create react app” error. Now, inspect your “package.json” file and ensure the following are correct:

1. You don’t have “sass” under “devDependencies”
2. If (1) is correct, ensure “sass” exists under “dependencies”

Once you’re certain of the previous points, you can deploy your application without the Sass error.

4. Perform a Manual Installation of Sass in Next.JS

A manual installation of Sass can fix the “cannot find module ‘sass’ next js” error. Now, if your Next.js is showing this error, do the following:

1. Open your terminal or command prompt.
2. Type the following without quotes: “npm install sass”.
3. Press enter on your keyboard.

5. Force the Installation of “Node-sass”

To solve the “cannot find module ‘sass’ npm” error, you can force the installation of module ‘node-sass’ in your project. The following is how to go about it:

• Open your terminal or command prompt.
• Type the following without quotes: “sudo npm install –save-dev  –unsafe-perm node-sass”

The following is a breakdown of how the command works:

• “–save-dev”: Add module ‘node-sass’ as a dev dependency
• “–unsafe-perm”: Run install script as a “root” user and download module ‘node-sass’ to your project.

6. Allow Typescript To Recognize “.Scss” Files

To solve the “cannot find module ‘sass’ react TypeScript” error, you can create a “.d.ts” file that will instruct TypeScript to recognize “.Scss” files. The following is how you do it:

1. Create a file in the root directory of your project and save it with the “.d.ts” extension.
2. Open this “.d.ts” files and add the following: “declare module ‘*.scss’;” (without quotes)

What you’ve done in the last step is what’s called a declaration. Here, you tell TypeScript to recognize ‘.scss” files in your project.

7. Install Dependencies Before Starting Your Node Server

Installing your dependencies in your Nuxt project is a fix for the “cannot find module ‘sass’ nuxt” error. Mind it; these are “production” and not development dependencies. Also, it should include the Sass module from the npm registry.

After this, you can start your node server, and you’ll not see a “module build failed” error.

8. Install “Sass-loader” and “Node-sass” in Vue.JS

The installation of the “sass-loader” and module ‘node-sass’ will fix the “cannot find module ‘sass’ Vue” error. You can use the following step to install both libraries:

• Open your terminal or command prompt.
• Type the following without quotes: “npm install sass-loader –save-dev”
• Press the “enter” key on your keyboard and let the installation complete. Now, proceed with the next step.
• Type the following without quotes: “npm install –save-dev node-sass”
• Press the enter key on your keyboard. This will install “node-sass” as a project dependency.

Conclusion

This article explained why your project cannot see the Sass module and how you can fix it. We showed you how to do this in different projects, so we’ll leave you with the following key points:

• If you have Sass as a dev dependency in a production environment, you’ll get an error.
• You can use a “.d.ts” file to tell TypeScript to recognize your “.scss” files.
• You can force the installation of “node-sass” in your Angular project to prevent an error about Sass.
• Always install Sass as a dependency; this will allow React or TypeScript to recognize your Sass files.

This article has increased your knowledge about working with Sass in your project. You should print it out to serve as your reference and happy coding!