Невозможно установить сторонний CSS-фреймворк в приложение Vue - PullRequest
Новая
       11

Невозможно установить сторонний CSS-фреймворк в приложение Vue

1 голос
/ 19 марта 2019

Я пытаюсь установить и использовать Salesforce Lightning Design System для своих стилей приложений.Но это просто не работает.Мои шаги (я использую vue-cli 3.4.0 + машинопись):

npm install @salesforce-ux/design-system --save

Сначала я импортировал его в стили моего App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style>
@import url("/node_modules/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css");

body {
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg stroke='%23CCC' stroke-width='0' %3E%3Crect fill='%23F5F5F5' x='-60' y='-60' width='110' height='240'/%3E%3C/g%3E%3C/svg%3E");
}
</style>

Затем я добавил классы к простой кнопке: 

<button class="slds-button slds-button_brand" @click="createTask">Save</button>

Это ничего не дает.Классы применяются, но стиль отсутствует.

Я попытался добавить его в свой main.ts: 

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import '../node_modules/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css'
Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

Это приводит к сбою всей сборки, потому что он говорит, что не может разрешить модуль:

./src/main.ts
Module not found: Error: Can't resolve '../node_modules/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css' in '/usr/src/app/src'

Это происходит даже при том, что зависимость находится в моем package.json, а автозаполнение в vscode показывает мне относительный путь.Я пробовал разные относительные пути, и ни один из них не работает.Что здесь происходит?

...