https://github.com/ystarlongzi/fis3-preprocessor-css-modules
基于fis3的css模块化方案
https://github.com/ystarlongzi/fis3-preprocessor-css-modules
css-modules fis3 loader
Last synced: 2 months ago
JSON representation
基于fis3的css模块化方案
- Host: GitHub
- URL: https://github.com/ystarlongzi/fis3-preprocessor-css-modules
- Owner: ystarlongzi
- Created: 2017-03-16T08:46:47.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-04-10T09:01:47.000Z (about 9 years ago)
- Last Synced: 2025-02-28T10:40:53.156Z (over 1 year ago)
- Topics: css-modules, fis3, loader
- Language: JavaScript
- Homepage:
- Size: 7.81 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 已废弃，请使用[fis3-hook-css-modules](https://github.com/ystarlongzi/fis3-hook-css-modules)
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 的资源加载程序能够分析到这块，并最终以 `` 的方式加载 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)查看这些标记的含义。