CODEWITHSUNDEEP
javascriptvue.jsnpmwebpackvue-cli-3
Tiago Matos
Tiago Matos

Reputation: 1706

Cannot Load CSS file with Vue packaged library (npm)

I am using vue-cli to build a librabry (npm package) to work for both SSR and client side. All seems to be working a part from that the CSS loads only if the component is present in the page that is being refreshing. However, if access any other pages that there is not the component, and then navigate (vue-route) to the page that the component is present, the CSS is not being loaded.

Currently, I need to import the lib as well as the CSS which I think is not ideal like so

import Vue from 'vue';
import myLib from 'myLib';
import 'myLib/dist/myLib-ssr.css';

Vue.use(myLib);

Any thoughts to fix it?

Upvotes: 1

Views: 2835

Answers (1)

Dabees
Dabees

Reputation: 504

According to this thread

you Just need to include it in your /main.js file like this...

<script>
  require('@/assets/css/main.css')
</script>

if it doesn't work then npm install style-loader css-loader and then in your webpack.config.js add this

module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]   //  <=  Order is very important
      }
    ]
  }

and then require again in your /main.js file

If you are using an outside library like materialize for example then

import Vue from 'vue'
import App from './App'
import router from './router'
//import the library and its css files
import materialize from 'materialize-css'
import 'materialize-css/dist/css/materialize.min.css'
//then use it as a global plugin
Vue.use(materialize)

new Vue({
  el: '#app',
   //load it in the main.js file
  router, materialize,
  components: { App },
  template: ''
})

Upvotes: 1

Related Questions