开发样式
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
组件的应用项目中,有如下代码:
import Button from 'button';
那么可以增加以下代码为 Button
组件增加样式:
import Button from 'button';
import 'button/dist/styles/button.css';
或者为应用项目的 Babel 配置增加 babel-plugin-import
插件,并增加以下配置:
{
libraryName: "button",
customName: () => {
return 'button/dist/styles/button.css';
}
}
开发内置样式与独立样式的注意点
在开发内置样式和独立样式的时候,有些限制需要注意。
- 首先独立样式与内置样式不可以相互使用,即不可以在内置样式里引用独立样式的代码,也不可以在独立样式中引用内置样式的代码。
- 其次独立样式文件不可以在
src
目录下的 JS(X)、TS(X) 文件中引用,因为需要样式与逻辑分离,因此会限制这样的使用方式。
内置样式与独立样式的构建产物
在样式编译构建的过程中,内置样式与独立样式的处理方式并不相同。
对于内置样式的构建
默认情况下不会对内置样式文件进行编译处理(将处理样式的工作交给使用组件的环境),如果需要对内置样式进行编译处理,则可以通过 modern.config.js
进行配置。
具体配置方式,可以阅读 API output.importStyle
内置样式的构建产物的输出位置位于 dist/js/styles/
目录下,这与独立样式构建产物的位置不同。
补充信息
在 dist/js/styles
路径中,dist
、js
、styles
都可以分别通过 output.path、output.jsPath、output.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/modern
、dist/js/treeshaking
、dist/js/node
目录,请阅读 构建可复用模块——构建 JS(X)、TS(X) 源码
对于独立样式的构建
独立样式在编译构建过程中会对样式进行编译处理。其构建产物的输出路径为 dist/styles
。
补充信息
在 dist/styles
路径中,dist
、styles
都可以分别通过output.path、output.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
文件进行样式开发。