Can't include scss file in the css nuxt.config.js configuration

Question

I am trying to include a scss file in the css nuxt.config.js option however when I run

npm run dev

I get the following error :

This dependency was not found:

* ..\assets\css\main.scss in ./.nuxt/App.js

To install it, you can run: npm install --save ..\assets\css\main.scss

Here is my package.json :

  "dependencies": {
    "bootstrap-vue": "^2.0.0-rc.11",
    "nuxt": "^1.0.0"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.1",
    "eslint": "^4.15.0",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-vue": "^4.0.0",
    "node-sass": "^4.9.2",
    "sass-loader": "^7.1.0"
  }

And the css configuration :

css: [
    "@/assets/css/main.scss",
  ],

The main.scss file is located under assets/css/main.scss :

@import "node_modules/bootstrap/scss/bootstrap";

* {
  font-family: "Quicksand";
  margin: 0;
  padding: 0;
}

.full-width {
  width: 100%;
}

Answer 1

As the docs points out, verify that you installed sass-loader, sass and fibers (npm packages).

npm install --save-dev sass sass-loader fibers

verify url path and check whether the file exists in the specified url

css: [
    '@/assets/scss/main.scss'
]

you could use style-resources-module

refer here