Question

我正在尝试安装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中的自动完成功能显示了相对路径，也会发生这种情况。我尝试了不同的相对路径，但没有一个起作用。这是怎么回事？

无法将第三方CSS框架安装到Vue应用中

0 个答案: