vue-good-table has no styles

user_2428794 0
Viewed 2601

I've been trying vue-good-tabel module which i installed directly with npm but whatever I do, i can't get it to load it's default styles or any styles at all for that reason.

Note: if I add styles manually to my styles.css file they will be displayed but i have to make the styles myself.

<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>

Edit 1: I also have Bootstrap in my vue project and jquery if it makes any difference

Edit 2 This is the error I get if i do import 'vue-good-table/dist/vue-good-table.css' which should import it from node_modules folder

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

Edit 3 If i try to add the import at the global level i still get the error but it's like this:

 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
vue-component vue.js html-table javascript
2 Answers

I was having the same problem, then got further confused by the scss files.

I went back to look at the documentation under Installation [https://xaksis.github.io/vue-good-table/guide/#installation] and saw 

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

which prompted me to add a link to the stylesheet and it worked for me. 

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

Hope that helps.

user_121661040

This worked for me:

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