弹出源文件

Question

我有一个 Vue 应用程序（NodeJS、Webpack 和 TailwindCSS），我想使用 VSSUE 评论系统。如何制作自定义样式，下面写的是：

https://vssue.js.org/guide/styles.html

Use Source Code of Vssue Styles

The style of Vssue is written in Stylus, and the source 
files are located in vssue/src/styles directory. 
The main style file is vssue/src/styles/index.styl.

You can eject and modify it to have fully customized styles for Vssue.

如何“弹出”然后应用样式（使用 Tailwind？）或只是普通的 .css 文件？我不知道该怎么办。

Answer 1

根据您提供的文档，您有两种修改默认样式的选择。

选项 1：VSSUE 生成的组件最终是一个简单的 html - 您可以检查 classes 并使用你的全球 CSS。这是最简单的方法——您甚至可以省略提供的默认 css（只是不要导入 vssue.css）并从头开始设计样式。当然，您不会使用 Tailwind 来执行此操作，因为您无法修改现有的 classes.

选项 2：修改 stylus 变量以自定义外观，同时保留默认的 github 样式。

我相信作者在ejecting手写笔文件中写到了“随心所欲地复制和修改”原始文件的可能性。您不需要这样做 - 您只需调整变量即可。方法如下：

您需要在开发依赖项中安装 stylus 和 stylus-loader。如果你使用 vue-cli，thats all - stylus will be supported right after installing these. For custom webpack config, add a proper style loader to handle stylus files.
先设置变量，再导入手写笔主文件。下一个，导入 github 风格的 css 文件。这是在您提供的 docs 中指定的。

你在 Vue class 组件中的代码可以看起来像

<style lang="stylus">
// set the variable first
$vssue-theme-color = red

// import the main file of Vssue styles and github-markdown-css
@import '~vssue/src/styles/index'
@import '~github-markdown-css/github-markdown.css'
</style>

祝你好运！

弹出源文件

Eject source file

node.js

webpack

vue.js

vuejs2

tailwind-css