Chain-css-loader NPM

chain-css-loader

简化在 umi 和 create-react-app 中使用 stylus, 也支持less和sass.(目前支持 css-loader@2)

安装

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 替换 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 替换 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;
  }
};