# fis3-preprocessor-css-modules

> 基于fis3的css模块化方案

Latest version **1.0.1** (published 2017-03-20) · ISC license · 0 weekly downloads

## Install

```sh
npm install fis3-preprocessor-css-modules
pnpm add fis3-preprocessor-css-modules
yarn add fis3-preprocessor-css-modules
bun add fis3-preprocessor-css-modules
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2017-03-20 |
| First published | 2017-03-16 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | zhangzilong.zzl@163.com |
| Maintainers | ystarlongzi |
| Keywords | fis3, css-modules, loader |

## Links

- npm: https://www.npmjs.com/package/fis3-preprocessor-css-modules
- npm.io page: https://npm.io/package/fis3-preprocessor-css-modules

## Dependencies (5)

- [deasync](https://npm.io/package/deasync.md) ^0.1.9
- [string-hash](https://npm.io/package/string-hash.md) ^1.1.3
- [generic-names](https://npm.io/package/generic-names.md) ^1.0.2
- [css-modules-loader-core](https://npm.io/package/css-modules-loader-core.md) ^1.0.1
- [fis3-preprocessor-css2js](https://npm.io/package/fis3-preprocessor-css2js.md) ^0.1.2

## Recent versions

- 1.0.1 (latest) — 2017-03-20
- 1.0.0 — 2017-03-16

## README

fis3-preprocessor-css-modules
=============================

一款基于 fis3 的 [css modules](https://github.com/css-modules/css-modules) 插件。


## 使用

### 安装
```
npm install fis3-preprocessor-css-module
```

### 配置

1. 如果项目中有使用 `Less`、`Sass`，你还需要借助 [fis-parser-less-2.x](https://github.com/fouber/fis-parser-less-2.x)、[fis-parser-node-sass](https://github.com/fex-team/fis-parser-node-sass) 插件，将它们转换为 css 文件
2. 你或许还需要借助 [fis3-postprocessor-postcss](https://github.com/jiangyuan/fis3-postprocessor-postcss) 插件，完成 css 属性补全等操作
3. 此插件也具有 js-require-css 功能，所以你可能不需要在配置 [fis3-preprocessor-js-require-css](https://github.com/fex-team/fis3-preprocessor-js-require-css)


```js
// 将项目里的 less 文件转换为 css 文件
fis.match('**.less', {
    rExt: '.css',
    parser: fis.plugin('less-2.x'),
});

// 将项目里的 sass 文件转换为 css 文件
fis.match('**.{sass,scss}', {
    rExt: '.css',
    parser: fis.plugin('node-sass'),
});

// 进行 css 属性补全
fis.match('**.{css,less,sass,scss}', {
    postprocessor: fis.plugin('postcss'),
});


// ---- 配置 css modules
fis.match('**.{js,es,es6,jsx,ts,tsx}', {
    preprocessor: fis.plugin('css-modules'),
});
```


## 参数说明
- `mode`：加载模式，默认为 `dep`
    * `dep`
    简单的标记依赖，并将js语句中对应的 `require` 语句去除。fis 的资源加载程序能够分析到这块，并最终以 `<link>` 的方式加载 css。
    
    * `inline` 
    将目标 css/less/scss 文件转换成 js 语句，并直接内嵌在当前 js 中，替换原有 `require` 语句。
    
    * `jsRequire` 
    将目标 css 文件转换成 js 语句，但是并不内嵌，而是产出一份同名的 js 文件，当前 `require` 语句替换成指向新产生的文件。


- `scope`：定义 class 名称生成方式。类型可为 `[function | string]`
    * 当类型为 `function` 时，会接受三个参数
        * `name` 待被转化的 class 名称
        * `file` 当前文件路径
        * `css` 当前文件内容
        
    ```js
    fis.match('**.{js,es,es6,jsx,ts,tsx}', {
        preprocessor: fis.plugin('css-modules', {
            scope: function (name, file, css) {
                return (file + '__' + 'name' + '__');
            },
        }),
    });
    ```
  
    * 当类型为 `string` 时，可以使用一些标记，如下:
    ```js
    fis.match('**.{js,es,es6,jsx,ts,tsx}', {
        preprocessor: fis.plugin('css-modules', {
            scope: '[name]__[local]___[hash:base64:5]',
        }),
    });
    ```
    你可以在[这里](https://github.com/webpack/loader-utils#interpolatename)查看这些标记的含义。

---
_Source: https://npm.io/package/fis3-preprocessor-css-modules · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._