好桌子没有样式。

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项目和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';