Return to top

Custom Styles

自动样式注入

Automatic Style Injection

仅首次新建 styles/index.scss 文件时，需要重启开发服务器，以确保 scss 被加载。

新建 styles 文件夹，目录下的以下文件将会被自动引入：

  • index.scss
  • index.css
  • css-vars.scss
  • css-vars.css

我们推荐您：

  • 新建 index.scss 书写全局样式，并可在其中导入其他样式，它会被自动引入。
  • 新建 css-vars.scss 书写 CSS 变量，它会被自动引入。

Create styles folder, and the following files under the directory will be automatically imported:

  • index.scss
  • index.css
  • css-vars.scss
  • css-vars.css

We recommend you:

  • Create index.scss file to write a global style and import other styles in it. It will be imported automatically.
  • Create css-vars.scss file to write CSS variables. It will be imported automatically.

自定义字体

Custom Font

譬如你可以在 styles/css-vars.scss 中覆盖默认的字体。

  • serif: 衬线字体：字体 abcd 123
  • sans: 非衬线字体：字体 abcd 123
  • mono: 等宽字体：字体 abcd 123

For example, you can override the default font in 'styles/css-vars.scss'.

  • serif: serif font: Font abcd 123
  • sans: sans-serif font: Font abcd 123
  • mono: monospaced font: Font abcd 123
scss
:root {
  --va-font-serif: 'Noto Serif SC', STZhongsong, STKaiti, KaiTi, Roboto,  serif;
  --va-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --va-font-mono: Menlo, Monaco, Consolas, "Courier New", monospace;
}
:root {
  --va-font-serif: 'Noto Serif SC', STZhongsong, STKaiti, KaiTi, Roboto,  serif;
  --va-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --va-font-mono: Menlo, Monaco, Consolas, "Courier New", monospace;
}
To Be Continued.
Edit this page on GitHub

Last updated: