Question

我正在使用vue-cli构建一个可用于SSR和客户端的库（npm软件包）。仅当组件在正在刷新的页面中存在组件时，所有这些似乎都从CSS加载中起作用。但是，如果访问没有该组件的任何其他页面，然后导航（通过路由）到该组件所在的页面，则不会加载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: ''
})

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

1 个答案: