Vue.js 未找到Sass相关模块？

在my Vue component

标记中包含Sass文件（在

节点(u modules

)时，会找到该文件，但不会找到与该文件相关的任何模块。一切似乎都配置正确，但我显然遗漏了一些东西。有什么好处

我尝试过安装/卸载各种网页包加载程序（包括

css加载程序

），删除并重新安装

node\u模块

，尝试过各种postsss配置，但迄今为止没有任何进展

提前谢谢

---

Vue组件（

IconicIcon.Vue

）：

相关文件结构：

root/
  src/
    components/
      IconicIcon.vue
  node_modules/
    open-iconic/
      font/
        css/
          open-iconic-bootstrap.scss
          fonts/
            open-iconic.eot
            open-iconic.otf
            open-iconic.svg
            open-iconic.ttf
            open-iconic.woff

错误：

WAIT  Compiling...                                                                                                        8:37:49 PM

98% after emitting CopyPlugin

ERROR  Failed to compile with 4 errors                                                                                    8:37:50 PM

These relative modules were not found:

* ../fonts/open-iconic.eot in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePost
Loader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules
/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/IconicIcon.vue?vue&type=style&
index=0&id=468ee29c&scoped=true&lang=scss&
* ../fonts/open-iconic.svg in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePost
Loader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules
/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/IconicIcon.vue?vue&type=style&
index=0&id=468ee29c&scoped=true&lang=scss&
* ../fonts/open-iconic.ttf in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePost
Loader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules
/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/IconicIcon.vue?vue&type=style&
index=0&id=468ee29c&scoped=true&lang=scss&
* ../fonts/open-iconic.woff in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePos
tLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_module
s/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/IconicIcon.vue?vue&type=style
&index=0&id=468ee29c&scoped=true&lang=scss&

package.json

：

{
  "name": "myapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "concurrently -r -k -n doc,nod,vue -c magenta,green,cyan \"docker-compose up\" \"nodemon server/app.js\" \"vue-cli-service serve\"",
    "build": "vue-cli-service build",
    "start": "node server/app.js",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e"
  },
  "dependencies": {
    "apollo-server": "^2.9.15",
    "babel-loader": "^8.0.6",
    "bootstrap": "^4.4.1",
    "core-js": "^3.4.3",
    "eslint": "^6.8.0",
    "graphql": "^14.5.8",
    "graphql-type-json": "^0.2.1",
    "jquery": "^3.4.1",
    "js-yaml-loader": "^1.2.2",
    "leaflet": "^1.6.0",
    "lowdb": "^1.0.0",
    "mkdirp": "^0.5.1",
    "mongodb": "^3.4.1",
    "open-iconic": "^1.1.1",
    "popper.js": "^1.16.0",
    "shortid": "^2.2.8",
    "slugify": "^1.3.6",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-e2e-cypress": "^4.1.0",
    "@vue/cli-plugin-router": "^4.1.0",
    "@vue/cli-plugin-unit-jest": "^4.1.0",
    "@vue/cli-plugin-vuex": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "concurrently": "^5.0.2",
    "graphql-tag": "^2.9.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ],
  "jest": {
    "preset": "@vue/cli-plugin-unit-jest"
  }
}

---

我通过使用CSS而不是Sass解决了这个问题。看起来像个傻瓜，但我已经在这上面花了太多时间了

<template>
  <div>
    <span class="oi" :title="icon" aria-hidden="true" :class="`oi-${icon}`"></span>
  </div>
</template>

<script>
export default {
  name: "iconic-icon",
  props: {
    icon: String
  }
};
</script>

<style scoped lang="scss">
@import "~open-iconic/font/css/open-iconic-bootstrap.css";
</style>

导出默认值{
名称：“标志性图标”，
道具：{
图标：字符串
}
};
@导入“~open-ignical/font/css/open-ignical-bootstrap.css”；

此类问题可能与saas加载器的工作方式有关。 我在我的一个项目中遇到了同样的问题，通过将字体目录移动到资产文件夹解决了这个问题

如果你谷歌这你会发现，因为我在这里张贴

在您的情况下，应将$icon font path变量更改为以下值： $icon字体路径：'/assets/fonts/'！违约

---

它会成功的

我想这可能会有帮助。谢谢@User28。我检查了那条线；这似乎应该有所帮助，但不幸的是还没有。更新

中字体的默认位置是有意义的。但是，我还没有弄清楚如何正确修改

vue.config.js

。也许我会用“字体真棒”，因为它似乎适合那些家伙(

{
  "name": "myapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "concurrently -r -k -n doc,nod,vue -c magenta,green,cyan \"docker-compose up\" \"nodemon server/app.js\" \"vue-cli-service serve\"",
    "build": "vue-cli-service build",
    "start": "node server/app.js",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e"
  },
  "dependencies": {
    "apollo-server": "^2.9.15",
    "babel-loader": "^8.0.6",
    "bootstrap": "^4.4.1",
    "core-js": "^3.4.3",
    "eslint": "^6.8.0",
    "graphql": "^14.5.8",
    "graphql-type-json": "^0.2.1",
    "jquery": "^3.4.1",
    "js-yaml-loader": "^1.2.2",
    "leaflet": "^1.6.0",
    "lowdb": "^1.0.0",
    "mkdirp": "^0.5.1",
    "mongodb": "^3.4.1",
    "open-iconic": "^1.1.1",
    "popper.js": "^1.16.0",
    "shortid": "^2.2.8",
    "slugify": "^1.3.6",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-e2e-cypress": "^4.1.0",
    "@vue/cli-plugin-router": "^4.1.0",
    "@vue/cli-plugin-unit-jest": "^4.1.0",
    "@vue/cli-plugin-vuex": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "concurrently": "^5.0.2",
    "graphql-tag": "^2.9.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ],
  "jest": {
    "preset": "@vue/cli-plugin-unit-jest"
  }
}

<template>
  <div>
    <span class="oi" :title="icon" aria-hidden="true" :class="`oi-${icon}`"></span>
  </div>
</template>

<script>
export default {
  name: "iconic-icon",
  props: {
    icon: String
  }
};
</script>

<style scoped lang="scss">
@import "~open-iconic/font/css/open-iconic-bootstrap.css";
</style>