Question

我一直在尝试直接通过npm安装的vue-good-tabel模块但是无论我做什么，由于这个原因，我都无法加载它的默认样式或任何样式。

注意：如果我将样式手动添加到styles.css文件中，则会显示它们，但是我必须自己制作样式。

<div id="about" class="section whitebg">
  <div class="container" style="width=100%; padding=0px; margin-left: 100px;">
   <vue-good-table
      :columns="columns"
      :rows="rows"
      theme="nocturnal"
      :pagination-options="{
        enabled: true,
        mode: 'records',
        perPage: 10,
        position: 'top',
        perPageDropdown: [10, 20, 50],
      }">
      <div slot="emptystate">
        No data to display
      </div>
    </vue-good-table>
  </div>
    <div class="col-xs-12" align="center">

  </div>
</div>

编辑1：我的vue项目中还有Bootstrap，如果有任何区别，可以使用jquery

编辑2 ，这是我在执行import 'vue-good-table/dist/vue-good-table.css'时应从node_modules文件夹导入它的错误

Module build failed: Error: EISDIR: illegal operation on a directory, read

 @ ./node_modules/vue-good-table/dist/vue-good-table.css 4:14-127 13:3-17:5 14:22-135
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Admin.vue?vue&type=script&lang=js&
 @ ./src/components/Admin.vue?vue&type=script&lang=js&
 @ ./src/components/Admin.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/main.js

编辑3 如果我尝试在全局级别添加导入，我仍然会收到错误，但这是这样的：

 ERROR  Failed to compile with 1 errors                             

 error  in ./node_modules/vue-good-table/dist/vue-good-table.css

Module build failed: Error: EISDIR: illegal operation on a directory, read

 @ ./node_modules/vue-good-table/dist/vue-good-table.css 4:14-127 13:3-17:5 14:22-135
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/main.js

Answer 1

我遇到了同样的问题，然后被scss文件进一步弄糊涂了。

我回过头来查看“安装”下的文档 [https://xaksis.github.io/vue-good-table/guide/#installation] 看到了

// import the styles
import 'vue-good-table/dist/vue-good-table.css'

提示我添加一个指向样式表的链接，它对我有用。

 <link href="../../../node_modules/vue-good-table/dist/vue-good-table.css" rel="stylesheet" />

希望有帮助。

Answer 2

这对我有用：

@import '~vue-good-table/dist/vue-good-table.css';

vue-good-table没有样式

2 个答案: