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

要继承主题，必须创建文件$ docker run --rm sandbox-image1 HOSTNAME=6831172af912 SHLVL=1 HOME=/root MYIMAGE1=image1 PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin TEST=test123 PWD=/ $ docker run --rm sandbox-image2 HOSTNAME=fab3c588e85a SHLVL=1 HOME=/root MYIMAGE2=image2 PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin TEST=test123 PWD=/：

docs/.vuepress/index.js

如果要禁用插件，则必须用// docs/.vuepress/index.js module.exports = { extend: '@vuepress/theme-default', };声明plugin-name：

false

有关此click here

的更多信息

如果要替换样式，则必须创建文件// 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] ], };：

docs/.vuepress/styles/index.styl

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

用户的styles / index.styl和主题的styles / index.styl都生成到最终的CSS文件中，但是用户的样式生成得较晚，因此具有更高的优先级。

Click here了解更多信息。

如果您对默认主题进行了很多更改，那么值得创建一个新主题，因为该继承是针对较小的更正的。

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

1 个答案: