无法使用 Vue 打包库 (npm) 加载 CSS 文件答案

【问题标题】：Cannot Load CSS file with Vue packaged library (npm)无法使用 Vue 打包库 (npm) 加载 CSS 文件
【发布时间】：2023-03-18 19:45:01
【问题描述】：

我正在使用 vue-cli 构建一个库（npm 包）以同时用于 SSR 和客户端。似乎只有当组件出现在正在刷新的页面中时，CSS才会加载。但是，如果访问没有该组件的任何其他页面，然后导航（vue-route）到该组件存在的页面，则不会加载 CSS。

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

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

Vue.use(myLib);

有什么解决办法吗？

【问题讨论】：

标签： javascript vue.js npm webpack vue-cli-3

【解决方案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: ''
})

【讨论】：