@modern-js/main-doc 2.26.0 → 2.27.0
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +10 -0
- package/docs/en/configure/app/experiments/source-build.mdx +13 -0
- package/docs/en/configure/app/source/alias-strategy.mdx +13 -0
- package/docs/en/configure/app/tools/swc.mdx +1 -1
- package/docs/en/guides/advanced-features/rspack-start.mdx +1 -1
- package/docs/en/guides/topic-detail/framework-plugin/hook-list.mdx +202 -168
- package/docs/en/tutorials/first-app/c03-css.mdx +3 -2
- package/docs/zh/configure/app/experiments/source-build.mdx +13 -0
- package/docs/zh/configure/app/source/alias-strategy.mdx +13 -0
- package/docs/zh/configure/app/tools/swc.mdx +1 -1
- package/docs/zh/guides/advanced-features/rspack-start.mdx +1 -1
- package/docs/zh/guides/topic-detail/framework-plugin/hook-list.mdx +158 -124
- package/package.json +5 -5
@@ -1,9 +1,10 @@
|
|
1
1
|
---
|
2
2
|
title: Add Style
|
3
3
|
---
|
4
|
+
|
4
5
|
# Add Style
|
5
6
|
|
6
|
-
import { Tabs, Tab as TabItem } from
|
7
|
+
import { Tabs, Tab as TabItem } from '@theme';
|
7
8
|
|
8
9
|
In the previous chapter, we learned how to use components from the third-party library.
|
9
10
|
|
@@ -15,7 +16,7 @@ First of all, we want to control the display of contact avatars by ourselves, an
|
|
15
16
|
|
16
17
|

|
17
18
|
|
18
|
-
Hypothesis has no ready-made components to implement, so you need to write some CSS yourself. Here we use [styled-components]
|
19
|
+
Hypothesis has no ready-made components to implement, so you need to write some CSS yourself. Here we use [styled-components](https://styled-components.com/) to implement similar requirements. Modern.js out of the box supports styled-components, which requires neither dependency nor configuration.
|
19
20
|
|
20
21
|
Style-components avoids many problems of traditional CSS writing through modularization. For example, writing styles directly on the style attribute of elements, the visual details of UI will also be mixed with the details of UI structure and business logic. Or classname needs to avoid global space renaming, which requires the use of naming conventions.
|
21
22
|
|
@@ -0,0 +1,13 @@
|
|
1
|
+
---
|
2
|
+
sidebar_label: sourceBuild
|
3
|
+
---
|
4
|
+
|
5
|
+
# experiments.sourceBuild
|
6
|
+
|
7
|
+
:::tip
|
8
|
+
该配置由 Modern.js Builder 提供,更多信息可参考 [experiments.sourceBuild](https://modernjs.dev/builder/api/config-experiments.html#experimentssourcebuild)。
|
9
|
+
:::
|
10
|
+
|
11
|
+
import Main from '@modern-js/builder-doc/docs/zh/config/experiments/sourceBuild.md';
|
12
|
+
|
13
|
+
<Main />
|
@@ -0,0 +1,13 @@
|
|
1
|
+
---
|
2
|
+
sidebar_label: aliasStrategy
|
3
|
+
---
|
4
|
+
|
5
|
+
# source.aliasStrategy
|
6
|
+
|
7
|
+
:::tip
|
8
|
+
该配置由 Modern.js Builder 提供,更多信息可参考 [source.aliasStrategy](https://modernjs.dev/builder/api/config-source.html#sourcealiasstrategy)。
|
9
|
+
:::
|
10
|
+
|
11
|
+
import Main from '@modern-js/builder-doc/docs/zh/config/source/aliasStrategy.md';
|
12
|
+
|
13
|
+
<Main />
|
@@ -21,7 +21,7 @@ import SWC from '@modern-js/builder-doc/docs/zh/shared/swc.md';
|
|
21
21
|
|
22
22
|
## 安装
|
23
23
|
|
24
|
-
import EnableSWC from '@modern-js/builder-doc/docs/zh/shared/
|
24
|
+
import EnableSWC from '@modern-js/builder-doc/docs/zh/shared/enableSwc.md';
|
25
25
|
|
26
26
|
<EnableSWC />
|
27
27
|
|