Question

我正在为我的vue项目使用vue-cli +这个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考虑了相对于我的项目根src文件夹的图像路径，我试图复制并通过leaflet/dist/images中的images文件夹到我的项目src文件夹，它的工作原理。那我怎么能做这个呢？

Answer 1

我遇到了同样的问题：Vue-cli导入资产css相对不适用于供应商外部 librairies 在样式文件中：

如果我使用这个版本的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，我遇到同样的问题。

基本复制：

安装@ vue-cli @ （npm remove vue-cli; npm remove -g vue-cli; npm install -g @ vue / cli）
我创建了一个基本项目（vue create relative-css-demo）
安装bulma＆amp; buefy （npm install bulma buefy）
我使用bulma import创建基本颜色资源：

的src /资产/乏/ colors.scss

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

在单独的scss文件中设置App样式：

的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&index=0&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-oneOf-1-0!./node_modules/css-loader??ref--8-oneOf-1-1!./node_modules/vue-loader/ ！LIB /装载机/ stylePostLoader.js ./ node_modules / postcss装载机/ 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＆安培;！？类型=风格＆安培;索引= 0＆安培;朗= 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）-dev - 服务器/客户端？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;
}

DONE在268ms成功编译

Answer 2

也许只是简单地说scc与leaflet.css不对应？

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

这对我有用。

Vue-cli导入资产css相对不起作用

2 个答案: