如何覆盖扩展主题的样式并删除插件？

Question

我已经制作了我的自定义主题并使用配置 (index.js) 扩展了基本主题：

extend: '@vuepress/theme-default'

我无法完成的是禁用插件并使用 (config.js) 覆盖默认样式：

module.exports = {
    // Disabling plugins we received from parent theme
    plugins: {
        '@vuepress/active-header-links': false,
        '@vuepress/search': false,
        '@vuepress/plugin-nprogress': false,
    },
    ...

和（index.styl）：

// For example
body
    background-color: red !important;

当我使用npm run dev 运行开发服务器时，甚至在我使用npm run build 构建网站之后，结果都是一样的。旧主题的插件和样式保留。

当我检查获取的 CSS 文件时，我什至可以看到它们。

我已阅读文档，但不明白这是一个问题，还是我有什么问题。

Answer 1

1. 要继承主题，您必须创建文件docs/.vuepress/index.js：

// docs/.vuepress/index.js
module.exports = {
  extend: '@vuepress/theme-default',
};

1. 如果你想禁用插件，你必须用false声明plugin-name：

// docs/.vuepress/index.js
module.exports = {
  extend: '@vuepress/theme-default',
  plugins: [
    ['@vuepress/active-header-links', false],
    ['@vuepress/search', false],
    ['@vuepress/plugin-nprogress', false],
    ['smooth-scroll', false]    
  ],
};

有关此click here的更多信息

1. 如果要替换样式，必须创建文件docs/.vuepress/styles/index.styl:

/* docs/.vuepress/styles/index.styl */
body {
  background-color: yellow !important;
}

这也适用于默认主题中存在的其他样式文件。但是你应该注意：

用户的styles/index.styl和主题的styles/index.styl都会生成到最终的CSS文件中，但是用户的style是后期生成的，因此具有更高的优先级。

Click here 了解更多信息。

4. 如果您对默认主题进行了大量更改，则值得创建一个新主题，因为继承旨在进行较小的更正。