无法使用Vue打包库加载CSS文件（npm）

Question

我正在使用vue-cli构建一个librabry（npm包）来为SSR和客户端工作。似乎只是在组件出现在正在刷新的页面中时，所有这些似乎都在起作用。但是，如果访问没有该组件的任何其他页面，然后导航（vue-route）到​​该组件所在的页面，则不会加载CSS。

目前，我需要导入lib以及我认为不理想的CSS

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

Vue.use(myLib);

有什么想法解决它吗？

Answer 1

根据这个thread

你需要将它包含在你的/main.js文件中......

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

如果它不起作用然后npm install style-loader css-loader然后在你的webpack.config.js添加这个

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

然后再次在您的/main.js文件中

---

如果您正在使用像materialize这样的外部库，那么

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: ''
})