前言

不知道有没有同志和我一样，一直没搞懂这些主题的样式是怎么设置出来的，主要还是太小白了，Vue 这些都不太会。不过经过我的初步研究得出了不少有价值的成果，希望对小白阶段的有帮助，毕竟很多人网页已经初具雏形，突然有个不喜欢的样式又改不了太恶心人了，这会狂补前端知识也不现实。当然最稳妥的还是一边补知识一边修改自己的博客，一边倒的去做一遍的工作 ( 指改网页样式和学习新知识 ) 都是不现实的，一边学习一边实践效果最好。

警告

我自己也是小白，所以目前的一些解释绝对不可能都对，但对于纯小白还是有指导意义的，后面学会了会翻新这些经验分享

VuePress 组件样式实现方法

目前 V 实现样式主要有两种方法:

• 主题文件夹 node_modules 内置
• .vuepress 文件内的 styles 文件夹内的 css/styl 文件

优先级: style > 主题内置

所以侧面也说明了 Vuepress 天生的高自定义程度，但确实需要一定的前端能力才能驾驭

主题默认的样式位置

Vuepress 的主题要想实现各种样式效果，都是在主题文件夹 node_modules 里的模块进行配置的，仔细观察会发现有很多文件内部都会有这个文件结构，尤其是各类 Vuepress-plugin 文件

.
├── lib
│   │ ( 这个文件夹内是有初始样式的 )
│   ├── client
│   │   ├── styles ( 这就是样式的存放路径啦！ )
│   ├── node
│   ├── types
│   │
│   │ ( 以下部分是一些部件的 js 函数 )
│   ├── node_modules
│   │
.   .

XXXX\Blog-Vuepress\node_modules\XXXXX\lib\client\styles

在这个路径上，就可以找到 styl 样式文件， 样式代码和 CSS 代码差不多，大同小异 :::