跳转到主文档

开发样式

Modern.js 对可复用模块项目提供了开发样式的支持。本章将要介绍如何在可复用模块项目中进行样式的开发。

内置样式与独立样式

什么是内置样式

在 Modern.js 中,对于在 src 目录下存在的样式文件称为内置样式

在 Modern.js 中推荐的使用方式是直接在组件的代码文件(.(j|t)sx))中导入它们。例如开发一个 Button 组件,包含以下文件:

  • ./src/button.tsx:包含组件的逻辑内容。
  • ./src/button.css:包含组件的内置样式。

那么可以在 ./src/button.tsx 文件增加如下代码为 Button 组件增加样式:

import './button.css';

什么是独立样式

在 Modern.js 中,对于在 styles 目录下存在的样式文件称为 独立样式

在 Modern.js 中独立样式的使用方式有以下两种:

  • 在组件需要按需加载的情况下,通过 babel-plugin-import 导入独立样式的产物。
  • 在应用项目中或其他可复用模块项目中,手动导入组件的独立样式的产物。

例如 Button 组件包含以下文件:

  • ./src/button.tsx:包含组件的逻辑内容。
  • ./styles/button.css:包含组件的独立样式。

在一个使用 Button 组件的应用项目中,有如下代码:

App.tsx
import Button from 'button';

那么可以增加以下代码为 Button 组件增加样式:

App.tsx
import Button from 'button';
import 'button/dist/styles/button.css';

或者为应用项目的 Babel 配置增加 babel-plugin-import 插件,并增加以下配置:

{
libraryName: "button",
customName: () => {
return 'button/dist/styles/button.css';
}
}

开发内置样式与独立样式的注意点

在开发内置样式和独立样式的时候,有些限制需要注意。

  1. 首先独立样式与内置样式不可以相互使用,即不可以在内置样式里引用独立样式的代码,也不可以在独立样式中引用内置样式的代码。
  2. 其次独立样式文件不可以在 src 目录下的 JS(X)、TS(X) 文件中引用,因为需要样式与逻辑分离,因此会限制这样的使用方式。

内置样式与独立样式的构建产物

在样式编译构建的过程中,内置样式与独立样式的处理方式并不相同。

对于内置样式的构建

默认情况下不会对内置样式文件进行编译处理(将处理样式的工作交给使用组件的环境),如果需要对内置样式进行编译处理,则可以通过 modern.config.js 进行配置。

具体配置方式,可以阅读 API output.importStyle

内置样式的构建产物的输出位置位于 dist/js/styles/ 目录下,这与独立样式构建产物的位置不同。

补充信息

dist/js/styles 路径中,distjsstyles 都可以分别通过 output.pathoutput.jsPathoutput.assetsPath 配置进行修改。

如果在组件文件.(t|j)sx 中引用这些文件,那么在构建成功后会修改导入内置样式文件的路径,将路径指向 dist/js/styles/*目录下内置样式文件的产物。

例如一个可复用模块项目有以下文件:

  • ./src/index.ts
  • ./src/index.css

其文件内容如下:

./src/index.ts

import './index.css';

export default function () {
return 'hello world';
}

./src/index.css

.a {
color: red;
& .b {
color: blue;
}
}
补充信息

这里可以在 CSS 文件中使用嵌套规则,是因为可复用模块项目默认支持 postcss-nesting 功能。

在执行构建命令 pnpm run build 构建命令后,会看到 dist 构建产物目录的目录结构如下:

.
├── js
│ ├── modern
│ │ └── index.js
│ ├── node
│ ├── styles
│ │ └── index.css
│ └── treeshaking
└── types

其中 dist/js/modern/index.js 的文件内容如下:

import "../styles/index.css";
export default function () {
return 'hello world';
}
补充信息

关于为何存在 dist/js/moderndist/js/treeshakingdist/js/node 目录,请阅读 构建可复用模块——构建 JS(X)、TS(X) 源码

对于独立样式的构建

独立样式在编译构建过程中会对样式进行编译处理。其构建产物的输出路径为 dist/styles

补充信息

dist/styles 路径中,diststyles 都可以分别通过output.pathoutput.assetsPath 配置进行修改。

例如为上一节中的组件新增 styles/index.css 独立样式文件,那么在执行构建命令 pnpm run build 后,会看到构建产物的目录结构如下:

.
├── js
│ ├── modern
│ ├── node
│ ├── styles
│ └── treeshaking
├── styles
│ └── index.css
└── types

使用 CSS 进行样式开发

可复用模块项目默认支持对 CSS 代码的开发,使用 PostCSS 对 CSS 代码进行编译处理。

使用 Less 进行样式开发

在可复用模块项目中如果需要使用 Less 开发样式,则需要通过微生成器开启对 Less 的功能支持。

我们可以在项目根目录下执行:

pnpm run new

然后按照如下选择:

? 请选择你想要的操作 启用可选功能
? 启用可选功能 启用 Less 支持

此时微生成器将为我们安装相应的依赖,当安装成功后,便可以在项目中使用 *.less 文件进行样式开发。

使用 SCSS/Sass 进行样式开发

在可复用模块项目中如果需要使用 SCSS/Sass 开发样式,则需要通过微生成器开启对 Sass 的功能支持。

我们可以在项目根目录下执行:

pnpm run new

然后按照如下选择:

? 请选择你想要的操作 启用可选功能
? 启用可选功能 启用 Sass 支持

此时微生成器将为我们安装相应的依赖,当安装成功后,便可以在项目中使用 *.sass*.scss 文件进行样式开发。