无法在 css nuxt.config.js 配置中包含 scss 文件

Question

我试图在 css nuxt.config.js 选项中包含一个 scss 文件，但是当我运行时

npm run dev

我收到以下错误：

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

这是我的 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"
  }

和 css 配置：

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

main.scss 文件位于 assets/css/main.scss 下：

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

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

.full-width {
  width: 100%;
}

Answer 1

正如文档所指出的，请验证您是否安装了sass-loader,sass和fibers(npm 包)。

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

验证url路径并检查文件是否存在于指定的url中

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

你可以使用样式资源模块

参考这里