github-markdown-css樣式檔案-一般用作文章正文的樣式美化
阿新 • • 發佈：2020-10-07
1.下載到專案中
cnpm i github-markdown-css
2.將樣式放到模組化vue目錄下,然後在 style中匯入
<style scoped lang="less">
@import './github-markdown.css';
</style>
3.在vue腳手架中的 .postcssrc.js檔案中加入exclude:'github-markdown' //css樣式檔案
module.exports={ //配置要使用的PostCSS外掛 plugins:{ //配置使用autoprefixer外掛 //作用：生成瀏覽器CSS樣式規則字首 //VueCLI內部已經配置了autoprefixer外掛//配置使用postcss-pxtorem外掛 //作用：把px轉為rem 'postcss-pxtorem':{ rootValue({file}){ returnfile.indexOf('vant')!==-1?37.5:75 },
// 配置要轉換的 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>