自定义样式
自动样式注入
注意
index.ts/index.scss/index.css不应当同时存在,否则可能会导致重复引入。- 仅首次新建 styles/index.scss 文件时,需要重启开发服务器,以确保 scss 被加载。
新建 styles 文件夹,目录下的以下文件将会被自动引入:
index.tsindex.scssindex.csscss-vars.scss(推荐在index.ts中自己引入xxx.scss,后续可能会被弃用)
我们推荐您:
- 新建
index.ts文件,并在其中自由引入其他样式文件xxx.scss。
Create styles folder, and the following files under the directory will be automatically imported:
index.tsindex.scssindex.css
We recommend you:
- Create
index.tsfile, and import other style filesxxx.scssfreely. index.ts/index.scss/index.cssshould not exist at the same time, otherwise it may cause duplicate imports.
自定义字体
譬如你可以在 styles/index.ts 中覆盖默认的字体。
serif: 衬线字体:字体 abcd 123sans: 非衬线字体:字体 abcd 123mono: 等宽字体:字体 abcd 123
For example, you can override the default font in 'styles/index.ts'.
serif: serif font: Font abcd 123sans: sans-serif font: Font abcd 123mono: monospaced font: Font abcd 123
ts[object Promise]
scss[object Promise]
示例
自定义光标
替换鼠标光标样式。
例如使用 Material Design Cursors。
default: 默认状态下图标。pointer: 指针(即链接状态下)图标。text: 文本选择图标。
新建 styles/index.ts 文件,引入 vars.scss:
ts[object Promise]
新建 styles/vars.scss 文件:
scss[object Promise]
覆盖暗色模式
需使用 html.dark 选择器包裹样式。
ts[object Promise]
scss[object Promise]
To Be Continued.