Vue2-medium 编辑器样式未引入

问题描述

我正在尝试使用基于此的 vue2-medium-editor：https://github.com/FranzSkuffka/vue-medium-editor

我正在按照说明进行操作，但由于某种原因我无法加载样式..

所以，我安装的第一步 yarn add vue2-medium-editor

然后我将组件导入：

<template>
  <div class="flex flex-col h-screen">    
    <div class="grid place-items-center">
      <!-- Auth Card -->
      <div
        class="w-full p-12 px-6 sm:px-10 bg-white rounded-lg shadow-md lg:shadow-lg"
      >
        <!-- <h2
          class="text-center font-semibold text-3xl lg:text-4xl text-gray-800"
        >
          
        </h2> -->

        <form  method="POST">
          <!-- Email Input -->          
          <input
            id="title"
            type="text"
            name="title"
            placeholder="Title of your story"            
            class="text-xl block w-full py-5 px-2 mt-2 text-gray-800 appearance-none border-b-2 border-gray-100 focus:text-gray-500 focus:outline-none focus:border-gray-200"
            required
          />    
          <editor :content='content' :options='options'></editor>      
        </form>
        <div class="mt-5 flex justify-between">          
          <router-link :to="{ name: 'write-story' }">
            <button class="bg-transparent hover:bg-blue-500 text-blue-700 font-bold py-2 px-4 rounded inline-flex items-center border-2 border-blue-500  hover:text-white hover:border-transparent">           
              <svg class="ml-2 fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"/></svg>                         
              <span>Back</span>              
            </button>  
          </router-link>                          
          <router-link :to="{ name: 'home' }">
            <button class="bg-transparent hover:bg-blue-500 text-blue-700 font-bold py-2 px-4 rounded inline-flex items-center border-2 border-blue-500  hover:text-white hover:border-transparent">           
              <span>Submit</span>                       
            </button>  
          </router-link>                      
        </div>
      </div>
    </div>
  </div>  
</template>

<script>  
  import editor from 'vue2-medium-editor'
  export default {
    
    name: "new-question",components: { editor },data() {
      return {
          content: "test",options: {
          }
      }
    }
  }
</script>

文档中有一步包含所需的 css，它指向基本媒体编辑器上的 css。

所以，我用 yarn add medium-editor

安装了媒体编辑器

然后我基于这个 github repo 包含了这样的样式：https://github.com/tui2tone/vue2-medium-editor =>

<style>    
  @import "~/medium-editor/dist/css/medium-editor.css";
  @import "~/vue2-medium-editor/src/themes/default.css"; 
</style>

这是在同一个文件中。它成功了，但似乎不起作用。

这就是我现在得到的：

我错过了什么？

编辑 1

如果我这样做：

<style>    
  @import "medium-editor/dist/css/medium-editor.css";
  @import "vue2-medium-editor/src/themes/default.css"; 
</style>

我收到此错误：

Uncaught Error: Cannot find module '-!../../../../node_modules/css-loader/index.js??ref--6-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!./medium-editor/dist/css/medium-editor.css'
    at webpackMissingModule (app.js:3172)
    at Object../node_modules/css-loader/index.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/containers/Story/Create.vue?vue&type=style&index=0&lang=css& (app.js:3172)
    at __webpack_require__ (app.js:20)
    at Object../node_modules/style-loader/index.js!./node_modules/css-loader/index.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/containers/Story/Create.vue?vue&type=style&index=0&lang=css& (app.js:21655)
    at __webpack_require__ (app.js:20)
    at Module../resources/js/containers/Story/Create.vue?vue&type=style&index=0&lang=css& (app.js:61170)
    at __webpack_require__ (app.js:20)
    at Module../resources/js/containers/Story/Create.vue (app.js:61119)
    at __webpack_require__ (app.js:20)
    at Module../resources/js/router.js (app.js:61283)
    ```

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）