github-markdown-css样式文件-一般用作文章正文的样式美化

1.下载到项目中
cnpm i github-markdown-css

2.将样式放到模块化vue目录下,然后在 style中导入

<style scoped >
@import './github-markdown.css';
</style>

module.exports = {

// 配置要使用的 PostCSS 插件

plugins: {

// 配置使用 autoprefixer 插件

// 作用：生成浏览器 CSS 样式规则前缀

// VueCLI 内部已经配置了 autoprefixer 插件

// 所以又配置了一次，所以产生冲突了

// 'autoprefixer': { // autoprefixer 插件的配置

// // 配置要兼容到的环境信息

// browsers: ['Android >= 4.0', 'iOS >= 8']

// },

// 配置使用 postcss-pxtorem 插件

// 作用：把 px 转为 rem

'postcss-pxtorem': {

rootValue ({ file }) {

return file.indexOf('vant') !== -1 ? 37.5 : 75

},

// 配置要转换的 CSS 属性

// * 表示所有

propList: ['*'],

exclude: 'github-markdown' //css样式文件

}

}

4.在需要美化的正文部分加入github-markdown-css样式文件的 主样式类名

markdown-body 生效!!!

  <!-- 文章内容 -->
        <div class="article-content markdown-body"
             v-html='article.content'
             ref="article-content"></div>
        <van-divider>the end</van-divider>
      </div>