rerumaccusamus
Version:
The meta-framework suite designed from scratch for frontend-focused modern web development.
64 lines (40 loc) • 1.8 kB
Markdown
---
sidebar_label: importStyle
---
# `output.importStyle`
:::info 适用的工程方案
* 模块
:::
* 类型： `'compiled-code'` | `'source-code'`
* 默认值： `'source-code'`
通过该配置可以决定是否编译 `src` 目录下的样式代码。
默认情况下，对 `src` 目录下的样式代码不会做编译处理。对于在 JS(X)、TS(X) 文件中导入样式的路径，在构建之后路径会指向位于 `dist/js/styles` 目录下未处理的样式文件。
如果配置 `'compiled-code'`，则会对 `src` 目录下的样式代码进行编译处理，并且在 JS(X)、TS(X) 文件中导入编译后的 CSS 样式文件的路径。
假如一个可复用模块项目有以下文件：
- `./src/index.tsx`
- `./src/index.less`
:::note 注
假设开启了处理 Less 的功能。
:::
并且在 `./src/index.tsx` 文件中有以下代码：
``` tsx
import './index.less';
```
那么在默认情况下，在执行构建命令构建成功之后会看到如下构建产物：
- `./dist/js/styles/index.less`
- `./dist/js/modern/index.js`
:::info 补充信息
`./dist/js/modern` 为构建 JS(X)、TS(X) 的构建产物目录，除了这个目录以外，还有 `./dist/js/node`、`./dist/js/treeshaking`，想要了解更多，可以阅读 [packageMode](/docs/apis/config/output/package-mode) API 内容。
:::
其中 `./dist/js/modern/index.js` 文件内容为：
``` jsx
import '../styles/index.less';
```
而当设置了 `compiled-code` 配置后，执行构建命令之后会看到如下构建产物：
- `./dist/js/styles/index.css`
- `./dist/js/modern/index.js`
其中 `./dist/js/styles/index.css` 为编译处理 `./src/index.less` 文件后的 CSS 产物文件。
而 `./dist/js/modern/index.js` 文件的内容为：
``` jsx
import '../styles/index.css';
```