https://github.com/fengxinming/chain-css-loader
Easy to use stylus、less and sass in umijs2 or create-react-app.
https://github.com/fengxinming/chain-css-loader
create-react-app css-loader less sass stylus stylus-loader umijs webpack
Last synced: 5 days ago
JSON representation
Easy to use stylus、less and sass in umijs2 or create-react-app.
- Host: GitHub
- URL: https://github.com/fengxinming/chain-css-loader
- Owner: fengxinming
- License: mit
- Created: 2019-06-13T14:00:58.000Z (almost 6 years ago)
- Default Branch: dev
- Last Pushed: 2019-10-22T07:26:41.000Z (over 5 years ago)
- Last Synced: 2025-04-18T14:21:38.245Z (7 days ago)
- Topics: create-react-app, css-loader, less, sass, stylus, stylus-loader, umijs, webpack
- Language: JavaScript
- Homepage:
- Size: 349 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# chain-css-loader
> 简化在 [umi](https://github.com/umijs/umi) 和 [create-react-app](https://github.com/facebook/create-react-app) 中使用 [stylus](http://stylus-lang.com/), 也支持`less`和`sass`.(目前支持 css-loader@2)
[](https://www.npmjs.com/package/chain-css-loader) [](https://npmjs.org/package/chain-css-loader) [](https://npmjs.org/package/chain-css-loader)
---
## 目录
- [安装](#安装)
- [API 相关](#API-相关)
- [使用说明](#使用说明)
- [在 umijs 中使用添加stylus支持](#在-umijs-中使用添加stylus支持)
- [在 create-react-app 中使用添加stylus支持](#在-create-react-app-中使用添加stylus支持)
- [使用事例](#使用事例)
- [更新记录](#更新记录)
---
## 安装
```
npm install chain-css-loader --save-dev
```
---
## API-相关
* chain-css-loader
* UmiRule
* new UmiRule( webpackChain [, options] )
* _instance_
* useStylus() ⇒ UmiRule
* useLess() ⇒ UmiRule
* useSass() ⇒ UmiRule
* useCss() ⇒ UmiRule
* extractCss() ⇒ UmiRule
* _static_
* RewiredRule
* new RewiredRule( webpackConfig [, options] )
* _instance_
* useStylus() ⇒ RewiredRule
* useLess() ⇒ RewiredRule
* useSass() ⇒ RewiredRule
* useCss() ⇒ RewiredRule
* extractCss() ⇒ RewiredRule
* _static_
`new UmiRule`
* 可选参数
* `cssPublicPath` 默认 '/', css在浏览器中被访问的跟路径
* `cwd` 默认 `process.cwd()`
* `modulesWithAffix` 默认 true, 对 *.module.[ext] 结尾的文件启用 CSS Modules
* `modules` 默认 false, 只对 *.module.[ext] 结尾的文件启用 CSS Modules; 如果设置为 true, 对所有 *.(css|scss|sass|less|styl(us)?) 启用 CSS Modules
* `sourceMap` 默认 true, 是否生成 .map 文件, 只在非开发环境生效
* `compress` 默认 true, 是否压缩css, 只在非开发环境生效
* `usePoststylus` 默认 false, 是否自行使用 poststylus 插件替换内置 postcss-loader
* `autoprefixer`
* `browsers` 浏览器兼容版本, 建议配置在 `.browserslistrc` 文件中
* `flexbox` 默认 `no-2009`
* `compress` 压缩css配置
* `mergeRules` 默认 false,
* `normalizeUrl` 默认 false,
* `mergeLonghand` 默认 false,
* `cssDeclarationSorter` 默认 false
* `stylus` stylus-loader 配置
* `test` 默认 /\.styl(us)?$/
* `modules` 默认 /\.module\.styl(us)?$/
* `loader` 默认 'stylus-loader'
* `options` stylus 配置参数
* `ssr` 跟 umijs 保持一致
---
## 使用说明
### 在 umijs 中使用添加stylus支持
```
npm install stylus stylus-loader --save-dev
```
#### 一般使用
- 添加以下代码至 `.umirc.js`
```
import { UmiRule } from 'chain-css-loader';
export default {
urlLoaderExcludes: [
/\.styl$/,
],
chainWebpack(config) {
const rule = new UmiRule(config, {
modules: true // start up CSS modules
});
rule.useStylus();
return config;
}
}
```
#### 高级特性
- 使用 [poststylus](https://github.com/seaneking/poststylus) 替换 [postcss](https://github.com/postcss/postcss)
```
npm install poststylus postcss-flexbugs-fixes autoprefixer rucksack-css --save-dev
```
- 添加以下代码至 `.umirc.js`
```
import poststylus from 'poststylus';
import { UmiRule } from 'chain-css-loader';
export default {
urlLoaderExcludes: [
/\.styl$/,
],
chainWebpack(config) {
const rule = new UmiRule(config, {
modules: true,
usePoststylus: true,
stylus: {
options: {
use: [
poststylus([
require('postcss-flexbugs-fixes'),
require('autoprefixer')({
flexbox: 'no-2009'
}),
'rucksack-css'
])
]
}
}
});
rule.useStylus();
return config;
}
}
```
- 运行`umijs`时可能报 browserslist 相关警告，需要添加以下代码至 `.browserslistrc`
```
>1%
last 4 versions
Firefox ESR
not ie < 9
```
### 在 create-react-app 中使用添加stylus支持
```
npm install stylus stylus-loader --save-dev
```
#### 简单使用
- 添加以下代码至 `config-overrides.js`, 前提是使用了`react-app-rewired`模块, 而不是导出webpack配置
```
const { RewiredRule } = require('chain-css-loader');
module.exports = {
webpack(config, env) {
const rule = new RewiredRule(config, {
modules: true
});
rule.useStylus();
return config;
}
};
```
#### 高级特性
- 使用 [poststylus](https://github.com/seaneking/poststylus) 替换 [postcss](https://github.com/postcss/postcss)
```
npm install poststylus postcss-flexbugs-fixes autoprefixer rucksack-css --save-dev
```
- 添加以下代码至 `config-overrides.js`
```
const poststylus = require('poststylus');
const { RewiredRule } = require('chain-css-loader');
module.exports = {
webpack(config, env) {
const rule = new RewiredRule(config, {
modules: true,
usePoststylus: true,
stylus: {
options: {
use: [
poststylus([
require('postcss-flexbugs-fixes'),
require('autoprefixer')({
flexbox: 'no-2009'
}),
'rucksack-css'
])
]
}
}
});
rule.useStylus();
return config;
}
};
```
---
## 使用事例
- [umi](examples/umi)
- [create-react-app](examples/create-react-app)
---
## 更新记录
* 1.1.4
* 增加参数ssr，跟umijs保持一致
* 1.1.3
* 更新`lodash`
* 1.1.2
* 修复对`css-loader`传参问题
* 1.1.1
* 修复对 CSS Modules 的支持问题
* 1.1.0
* 支持在`create-react-app`脚手架中使用`stylus`、`less`、`sass`等
* 1.0.0
* 支持在`umi`项目中使用`stylus`等