Относительный scss импорта Vue-cli не работает для поставщиков ** внешних ** библиотек ** в файлах стилей ** - PullRequest
Новая
       21

Относительный scss импорта Vue-cli не работает для поставщиков ** внешних ** библиотек ** в файлах стилей **

0 голосов
/ 08 июня 2018

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

  • импорт проекта относительноscss (в src) всегда в порядке.
  • импорт внешнего относительного scss (в node_modules) в теге допустим.
  • импорт внешних относительных scss (в node_modules) в файл scss NOK .

Если я возьму эти версии 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"
  },

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

Базовое воспроизведение:

  • Install @ vue-cli @ (npm удалить vue-cli; npm удалить -g vue-cli; npm install -g @ vue / cli)

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

  • Установить bulma & buefy (npm установить bulma buefy)

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

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&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 -lative-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 ?? исх - 8-oneOf-1-3 ./ SRC / App.scss вю & тип = стиль и индекс = 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-сервер / клиент? http://localhost:8080/sockjs-node (webpack) /hot/dev-server.js ./src/main.js

Но если я импортирую цвета внутри тега style, это сработает.Даже если я импортирую другие собственные файлы активов в App.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;
}

СДЕЛАНО Успешно скомпилировано за 268 мс

1 Ответ

0 голосов
/ 11 июня 2018

На самом деле я работаю с новой нотацией импорта:

Нотация \ @import "../../../node_modules/bulma" устарела, правильная нотация \ @import "~ bulma / sass / utilities / _all";

Вы можете увидеть простой пример сгенерированного проекта VUE с внешним импортом bulma и buefy css: https://github.com/vuejs-templates/webpack

...