VUE-CLI进口资产CSS相对行不通

Question

我正在使用vue-cli vue项目的webpack模板，我想在网站中使用传单，但是当我导入他们的CSS文件时，我有以下错误：

导入的代码

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

These relative modules were not found:
* ./images/layers-2x.png in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90",
"scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles
&index=0&bustCache!./src/App.vue
* ./images/layers.png in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","sc
oped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&in
dex=0&bustCache!./src/App.vue
* ./images/marker-icon.png in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./src/App.vue

问题是WebPack考虑相对于我的Project root SRC文件夹的图像路径，我尝试将leaflet/dist/images中的images文件夹复制并经过我的Project SRC文件夹，并且它的工作方式。那么我该如何工作？

Answer 1

也许只是与sccs不合适的scc.css？

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

这对我有用。

Answer 2

我也有同样的问题：vue-cli导入资产CSS相对不适用于供应商外部 librairies in Style files ：：：

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

packadge.json

 "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"
  },

我在内部的相对链接我的应用程序中没有任何问题，但是如果我导入 externals 喜欢buefy或bulma，则在样式文件中，我也有同样的问题。

基本复制：

• install @vue-cli @（npm remove vue-cli; npm remove -g vue-cli; npm install -g @vue/cli）

• i创建一个基本项目（VUE创建相对CSS-DEMO）

• 安装Bulma＆amp;Buefy （NPM安装Bulma Buefy）

• 我用Bulma Import创建一个基本的颜色资产：

SRC/Assets/vars/colors.scss

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

• 在单独的SCSS文件中设置应用程序样式：

src/app.vue

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

src/app.scss

@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;
}

您有错误：

错误无法用1个错误编译

错误中的错误/src/app.scss?vue&Type=style&Amp; index = 0& amp;lang=scss

模块构建失败（从 /home/awa/projets/node_modules/sass-loader/lib/loader.js）：

@import" ../../../../node_modules/bulma";^ 要导入未找到或无法读取的文件：../../.././node_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_modules/vue-style-loader?ref--8-8-onoof-1-0！lib/loaders/stylepostloader.js！./node_modules/postcss-loader/lib ?? ref--8-8-onoof-1-2！参考 - 8-oneof-1-3！./src/app.scss？vue＆amp; type = style＆amp; index = 0＆amp; lang = scss 4：14-310 14：3-18：5 14：310-18：4 15：22-318 @ ./src/app.scss?vue&Type=style&Amp; index = 0& amp;lang=scss @ ./src/app.vue @ ./src/main.js @ multi （webpack）-dev-server/client？http：//localhost：8080/sockjs-node （webpack）/hot/dev-server.js ./src/main.js

但是，如果我在样式中导入颜色，则可以正常工作。即使我在app.scss中导入我自己的另一个资产SCSS文件也可以...

src/app.vue

<style lang="scss" src="./App.scss">
  @import './assets/vars/colors.scss'
</style>

src/app.scss

@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;
}

完成在268ms中成功编译