有没有办法减少Vuepress左面板的宽度？答案

【问题标题】：Is there a way to reduce the width of the left panel of Vuepress?有没有办法减少Vuepress左面板的宽度？
【发布时间】：2019-02-16 14:46:59
【问题描述】：

我认为 Vuepress 的左窗格太宽了。想知道是否有任何设置会减小左侧面板的宽度？

【问题讨论】：

标签： vuepress

【解决方案1】：

以防万一有人在使用 Vuepress >= 1 时遇到此问题。在新版本的 Vuepress 中，不推荐使用 override.styl，现在通过在 .vuepress/ 中创建一个名为 styles/ 的文件夹并创建一个文件来完成此操作叫palette.styl。然后，您可以使用 Richard 答案中的命令。

【讨论】：

【解决方案2】：

将文件override.styl添加到.vuepress文件夹，并添加以下行设置侧面板宽度（默认为20rem）

$sidebarWidth = 10rem

这里还有很多其他的东西。要探索选项，请使用命令

vuepress eject ejected

然后导航到/ejected/.vuepress/theme/styles/ 并查看基础项目中使用了哪些样式标签。

如果您以后想更新 VuePress，请务必从项目中删除弹出的文件。

【讨论】：

我们如何确定所有可编辑的 .styl 变量？当我打开 /ejected/.vuepress/theme/ 文件时，我看到它们 ($varName) 散布在 CSS 中。不过，并非每个控件都有 .styl 变量。 /styles/theme.styl 中的表格控件就是一个很好的例子。 table border-collapse collapse margin 1rem 0 display: block overflow-x: auto tr border-top 1px solid #dfe2e5 &:nth-child(2n) background-color #f6f8fa th, td border 1px solid #dfe2e5 padding .6em 1em
事情有点奇怪 - Vupress 版本 0.x 和版本 1.x 有不同的样式覆盖 - 以上适用于版本 0.x。
为了回答您的表格样式示例，我在 Markdown 和 table { background-color blue; } 到 override.styl 中添加了一个表格，结果是蓝色背景。我认为诀窍是检查页面是否有您想要定位的正确元素和类选择器，然后在 override.styl 中试用它们。
谢谢。我很清楚：在 .md 文件中添加一个元素，在 VuePress 中渲染它，右键单击，检查元素....但是，“table {...”是 css 选择器还是 .styl 变量你不知何故知道要转换？
是的，我在 MD 文件 markdownguide 中添加了一个表格，该表格在运行时生成到表格元素中。 table {... 是一个普通的旧 css 元素选择器。不确定这将在多大程度上与已编译降价的其他部分一起使用。问题将是特异性，例如对于 div。我倾向于using a Vue component 而不是降价，而不是花时间在降价的强制样式上。