docs: recommend use styles/index.ts

demo/custom/styles/README.md

@@ -1,8 +0,0 @@
-# styles
-
-You can override styles here.
-
-- New file `index.scss` to write global css.
-- New file `css-vars.scss` to set css vars.
-
-More info see <https://valaxy.site/guide/custom/styles>.

docs/pages/guide/custom/styles.md

@@ -15,30 +15,29 @@ end: false
 :::zh-CN
 新建 `styles` 文件夹，目录下的以下文件将会被自动引入：
 
+- `index.ts`
 - `index.scss`
 - `index.css`
-- `css-vars.scss`
-- `css-vars.css`
+- `css-vars.scss` (推荐在 `index.ts` 中自己引入 `xxx.scss`，后续可能会被弃用)
 
 我们推荐您：
 
-- 新建 `index.scss` 书写全局样式，并可在其中导入其他样式，它会被自动引入。
-- 新建 `css-vars.scss` 书写 CSS 变量，它会被自动引入。
+- 新建 `index.ts` 文件，并在其中自由引入其他样式文件 `xxx.scss`。
+- `index.ts` / `index.scss` / `index.css` 不应当同时存在，否则可能会导致重复引入。
 
 :::
 
 :::en
 Create `styles` folder, and the following files under the directory will be automatically imported:
 
+- `index.ts`
 - `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.
+- Create `index.ts` file, and import other style files `xxx.scss` freely.
+- `index.ts` / `index.scss` / `index.css` should not exist at the same time, otherwise it may cause duplicate imports.
 
 :::
 
@@ -47,7 +46,7 @@ We recommend you:
 ## Custom Font {lang="en"}
 
 :::zh-CN
-譬如你可以在 `styles/css-vars.scss` 中覆盖默认的字体。
+譬如你可以在 `styles/index.ts` 中覆盖默认的字体。
 
 - `serif`: 衬线字体：<span font="serif">字体 abcd 123</span>
 - `sans`: 非衬线字体：<span font="sans">字体 abcd 123</span>
@@ -56,7 +55,7 @@ We recommend you:
 :::
 
 :::en
-For example, you can override the default font in 'styles/css-vars.scss'.
+For example, you can override the default font in 'styles/index.ts'.
 
 - `serif`: serif font: <span font="serif">Font abcd 123</span>
 - `sans`: sans-serif font: <span font="sans">Font abcd 123</span>
@@ -64,7 +63,13 @@ For example, you can override the default font in 'styles/css-vars.scss'.
 
 :::
 
+```ts
+// styles/index.ts
+import './vars.scss'
+```
+
 ```scss
+// styles/vars.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;

docs/pages/guide/getting-started.md

@@ -337,8 +337,7 @@ In most cases, you only need to work in the `pages` folder.
 - `pages`: 你的所有页面
   - `posts`: 写在 `pages/posts` 文件夹下的内容，将被当作博客文章
 - `styles`: 覆盖主题样式，文件夹下的这些 scss 文件将会被自动加载
-  - `index.scss` / `index.css`
-  - `css-vars.scss` / `css-vars.css`
+  - `index.ts` / `index.scss` / `index.css`
 - `components`: 自定义你的组件（将会被自动注册）
 - `layouts`: 自定义布局 (譬如可以通过 `layout: xxx` 来使用 `layouts/xxx.vue` 布局)
 - `locales`: 自定义国际化关键词

docs/pages/themes/write.md

@@ -96,9 +96,8 @@ pnpm create valaxy
   - `main.ts`: 主入口文件 `defineAppSetup`
 - `stores`: 主题的状态管理
   - `app.ts`: 全局状态管理文件
-- `styles`: 主题的样式（`css-vars.scss` 与 `index.scss` 将会被自动引入）
-  - `css-vars.scss`: 主题的 CSS 变量
-  - `index.scss`: 主题的样式入口文件
+- `styles`: 主题的样式
+  - `index.ts`: 主题的样式入口文件
 - `tsconfig.json`: 主题的 TypeScript 配置
 - `types`: 主题的类型声明
   - `index.d.ts`: 主题的类型声明入口文件

packages/create-valaxy/template-blog/styles/README.md

@@ -2,7 +2,19 @@
 
 You can override styles here.
 
-- New file `index.scss` to write global css.
-- New file `css-vars.scss` to set css vars.
+## 示例
+
+- New file `index.ts` to import other style files.
+
+```ts
+import './vars.scss'
+```
+
+```scss
+// vars.scss
+:root {
+  --primary-color: #007bff;
+}
+```
 
 More info see <https://valaxy.site/guide/custom/styles>.

packages/valaxy-theme-yun/docs/zh-CN/config.md

@@ -38,12 +38,18 @@ export default defineConfig<ThemeConfig>({
 > 如果您想要更改云的色彩，请更改 `var(--yun-c-cloud)` 的值
 
 ```scss
-// 新建 styles/css-vars.scss
+// 新建 styles/vars.css 文件
 :root {
   --yun-c-cloud: red;
 }
 ```
 
+新建 `styles/index.ts` 文件，引入 `vars.css`。
+
+```ts
+import './vars.css'
+```
+
 ## 自定义友情链接
 
 新建 `pages/links/index.md` 文件。
@@ -88,9 +94,15 @@ random: true
 
 ### 覆盖背景、侧边栏图片
 
-您可以新建 `styles/css-vars.scss`，覆盖默认 CSS 变量。
+您可以新建样式文件并引入，以覆盖默认 CSS 变量。
 
-```css
+```ts
+// styles/index.ts
+import './vars.scss'
+```
+
+```scss
+// styles/vars.scss
 :root {
   /* 背景图片 */
   --yun-bg-img: url("https://cdn.yunyoujun.cn/img/bg/stars-timing-0-blur-30px.jpg");

packages/valaxy/node/virtual/styles.ts

@@ -24,7 +24,6 @@ export const templateStyles: VirtualModuleTemplate = {
         join(root, 'styles', 'index.css'),
         join(root, 'styles', 'index.scss'),
 
-        join(root, 'styles', 'css-vars.css'),
         join(root, 'styles', 'css-vars.scss'),
       ]