Vue-cli импортирует активы css относительно не работает

я использую vue-cli + этот шаблон веб-пакета для своего проекта vue, я хотел использовать листовку на своем веб-сайте, но когда я импортирую их файл 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

и проблема в том, что веб-пакет рассматривает путь изображения относительно корневой папки src моего проекта, я попытался скопировать и вставить папку изображений в leaflet/dist/images в папку src моего проекта, и это сработало. так как я могу заставить это работать?


webpack css sass vue-cli
person karim    schedule 24.12.2017    source источник
comment
вы можете проверить эту ссылку stackoverflow.com/questions/34311656/   -  person Aslan Mammadrzayev    schedule 24.12.2017

Ответы (2)


arrow_upward
1
arrow_downward

Может быть, это просто язык с sccs, не соответствующий leaflet.css?

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

Это сработало для меня.

person Lucile Fievet    schedule 08.06.2018

arrow_upward
0
arrow_downward

У меня такая же проблема: Vue-cli импортирует ресурсы css относительно не работает для поставщиков внешних библиотек в файлах стилей:

Если я возьму эти версии vue и @vue-cli:

пакет.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"
  },

У меня нет проблем с относительными ссылками внутри моего приложения, но если я импортирую внешние файлы, такие как buefy или bulma, в файл стиля, у меня возникает та же проблема.

Основное воспроизведение:

  • Установите @vue-cli @(npm remove vue-cli; npm remove -g vue-cli; npm install -g @vue/cli)

  • Я создаю базовый проект (vue create relative-css-demo)

  • Установите bulma и buefy (npm install bulma buefy)

  • Я создаю базовый цветной актив с импортом bulma:

src/активы/vars/colors.scss

@import "../../../node_modules/bulma/sass/utilities/_all";
  • Задайте стиль приложения в отдельном файле scss:

источник/App.vue

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

источник/приложение.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/loaders/stylePostLoader.js!./node_modules/postcss-loader/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)-dev-server/client?http://localhost:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main .js

Но если я импортирую цвета внутри тега стиля, он работает. Даже если я импортирую свои собственные файлы scss другого актива в App.scss, все в порядке ...

источник/App.vue

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

источник/приложение.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 Успешно скомпилировано за 268 мс

person Lucile Fievet    schedule 08.06.2018