Vue introduces md files and displays them on the page, and the font size of the text cannot be adjusted

step 1:

1. Install vue-markdown-loader

    yarn add vue-markdown-loader -D
   

2. Install github-markdown-css, highlight.js

   yarn add github-markdown-css  -D
   yarn add highlight.js  -D
   

Step 2:

Configure webpack in vue.config.js:

chainWebpack: (config) => {
    
    
    config.module.rule('md')
      .test(/\.md/)
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('vue-markdown-loader')
      .loader('vue-markdown-loader/lib/markdown-compiler')
      .options({
    
    
        raw: true
      })
  }

Step 3:

Page import styles (can be introduced locally or in the main.js file)

// markdown样式
import 'github-markdown-css'
// 代码高亮
import 'highlight.js/styles/github.css'

Step 4:

import md file

<template>
  <div class="content">
  	<!-- class的值必须包含markdown-body，否则样式不生效 -->
    <div class="markdown-body">
      <test></test>
   </div>
  </div>
</template>

<script>
// 引入md文件
import test from './test.md'

export default {
    
    
  components :{
    
    md}
};
</script>

The last step: the pit! ! !

 在上面步骤完成之后，你可能会发现你的正文字体有点小，12px, 不协调，而且无论怎么加样式都不生效，调节不了正文字体大小

Solution:

.markdown-body {
    
    
     font-size: 16px;
  }

If it still doesn't work, be stubborn! ! !

.markdown-body {
    
    
   font-size: 16px;
   /deep/ body {
    
    
     font-size: 16px;
   }
}

OK, this is the end here.
I hope the recorded questions can help you~
吃喜~