# fis3-preprocessor-js-require-css

**Repository Path**: mirrors_fex-team/fis3-preprocessor-js-require-css

## Basic Information

- **Project Name**: fis3-preprocessor-js-require-css
- **Description**: 支持 js 中用 require 直接加载 css 文件。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-09-24
- **Last Updated**: 2026-02-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

fis3-preprocessor-js-require-css
===============
支持 js 中直接 require css. (es6 的 import 也支持，但是先通过 es6 => es5 的转换。)


只能在 fis3 中使用。

```
npm install -g fis3-preprocessor-js-require-css
```

使用方式配置如下：

```js
fis.match('*.{js,es,es6,jsx,ts,tsx}', {
  preprocessor: fis.plugin('js-require-css')
})
```

如果想 require 文件比如图片，请使用[fis3-preprocessor-js-require-file](https://github.com/fex-team/fis3-preprocessor-js-require-file)

两个可以同时使用，配置如下。

```js
fis.match('*.{js,es,es6,jsx,ts,tsx}', {
  preprocessor: [
    fis.plugin('js-require-file'),
    fis.plugin('js-require-css')
  ]
})
```

## 参数说明

`mode`: 加载模式，默认为 `dependency`
  * `dep | dependency` 【推荐】 简单的标记依赖，并将js语句中对应的 `require` 语句去除。fis 的资源加载程序能够分析到这块，并最终以 `<link>` 的方式加载 css.
  * `embed | inline` 将目标 css 文件转换成 js 语句, 并直接内嵌在当前 js 中，替换原有 `require` 语句。
  * `jsRequire` 将目标 css 文件转换成 js 语句，但是并不内嵌，而是产出一份同名的 js 文件，当前 `require` 语句替换成指向新产生的文件。
  
## 使用示例

### inline

按以下方式配置 fis-conf.js 以及在 js 文件中引用，css 文件会以匿名函数的形式嵌入到生成的 js 文件中，运行时自动以 `style` 标签添加到页面头部

fis-conf.js

```js
// match 到的 js 文件具有 require css 的能力
fis.match('*.{js,es,es6,jsx,ts,tsx}', {
  // embed or inline
  preprocessor: fis.plugin('js-require-css', {mode: 'inline'})
});
```

js

```js
// reuqire 只是一个识别标记，就算 js 文件中没有 require 函数也可以这样写
require('xxx.css');
```