Vue cli导入资产css相对不工作

我正在为我的vue项目使用vue cli+此网页包模板，我想在我的网站中使用传单，但在导入他们的css文件时，出现以下错误：

进口代码

---

和问题是WebPACK考虑了相对于我的项目根SRC文件夹的图像路径，我试图复制和过去的图像文件夹在单张/ DIST /图像到我的项目SRC文件夹，它的工作。那么我如何才能做到这一点呢？

我遇到了完全相同的问题：Vue cli导入资产css relative不适用于供应商样式文件中的外部库：

如果我使用此版本的vue和@vue cli：

packadge.json

我的应用程序中的相对链接没有任何问题，但是如果我在一个样式文件中导入像buefy或bulma这样的外部链接，我也会遇到同样的问题

基本复制：

安装@vue cli@npm删除vue cli；npm移除-g vue cli；npm安装-g@vue/cli

我创建了一个基本的项目vue创建相对css演示

安装bulma和buefy npm安装bulma buefy

我使用bulma导入创建基本颜色资源：

src/assets/vars/colors.scss

在单独的scss文件中设置应用程序样式： src/App.vue

你有一个bug：

编译错误失败，有1个错误

./src/App.scss中出错？vue&type=style&index=0&lang=scss

模块生成从失败 /home/awa/Projets/node_modules/sass-loader/lib/loader.js：

@导入../../../node_模块/bulma^ 要导入的文件找不到或不可读：../../../node\u modules/bulma。父样式表： /home/awa/Projets/vues templates/simple relative css demo/src/assets/vars/colors.scss 在/home/awa/Projets/vues templates/simple relative css demo/src/assets/vars/colors.scss中 第75行第1列

@ ./node_模块/vue样式加载器？？参考-8-oneOf-1-0/节点\模块/css加载器？？参考-8-oneOf-1-1/node_modules/vue loader/lib/loaders/stylePostLoader.js/节点_模块/postss加载器/lib？？ref-8-oneOf-1-2/home/awa/Projets/node_modules/sass loader/lib/loader.js？？ref-8-oneOf-1-3/src/App.scss？vue&type=style&index=0&lang=scss 4:14-310 14:3-18:5 14:310-18:4 15:22-318 @ ./src/App.scss？vue&type=style&index=0&lang=scss@./src/App.vue@ ./src/main.js@multi 网页包开发服务器/客户端？ webpack/hot/dev-server.js./src/main.js

但是，如果我在样式标签中导入颜色，它就会工作。 即使我在App.scss中导入我自己的另一个资产scss文件，也没关系

src/App.vue

在268ms内成功编译完成

---

可能只是带有sccs的lang与传单.css不对应

<style lang="css">
    @import "../node_modules/leaflet/dist/leaflet.css";
</style>

这对我很有用。

您可以查看此链接

 "dependencies": {
    "vue": "^2.5.16"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.0-beta.15",
    "@vue/cli-plugin-eslint": "^3.0.0-beta.15",
    "@vue/cli-service": "^3.0.0-beta.15",
    "buefy": "^0.6.6",
    "bulma": "^0.7.1",
    "vue-template-compiler": "^2.5.16"
  },

@import "../../../node_modules/bulma/sass/utilities/_all";

<style lang="scss" src="./App.scss"></style>

@import './assets/vars/colors.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 lang="scss" src="./App.scss">
  @import './assets/vars/colors.scss'
</style>

@import './assets/vars/noexternals.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 lang="css">
    @import "../node_modules/leaflet/dist/leaflet.css";
</style>