chain-css-loader

Easy to use stylus less or sass in umi or create-react-app.(support css-loader@2 currently)

Table of contents

• Installation
• API Reference
• Usage
  • Example for Umi
    • Sample for Umi
    • Advanced Features for Umi
  • Example for create-react-app
    • Sample
    • Advanced Features
• Examples
• Release History

Installation

npm install chain-css-loader --save-dev

API Reference

• 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

These are the optional config options for new UmiRule

• optional options
  • 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 配置参数

Usage

Example for Umi

• Below is an example for using stylus in umi

npm install stylus stylus-loader --save-dev

Sample for Umi

• Put the following code in the file .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;
  }
}

Advanced Features for Umi

• Use poststylus instead of postcss

npm install poststylus postcss-flexbugs-fixes autoprefixer rucksack-css --save-dev

• Put the following code in the file .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;
  }
}

• Copy the following code to the file .browserslistrc if it exists, or create a new file named .browserslistrc and then put below in the file

>1%
last 4 versions
Firefox ESR
not ie < 9

Example for create-react-app

• Below is an example for using stylus in create-react-app

npm install stylus stylus-loader --save-dev

Sample

• Put the following code in the file config-overrides.js

const { RewiredRule } = require('chain-css-loader');

module.exports = {
  webpack(config, env) {
    const rule = new RewiredRule(config, {
      modules: true
    });
    rule.useStylus();

    return config;
  }
};

Advanced Features

• Use poststylus instead of postcss

npm install poststylus postcss-flexbugs-fixes autoprefixer rucksack-css --save-dev

• Put the following code in the file 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;
  }
};

Examples

• umi
• create-react-app

Release History

• 1.1.2

  • 修复对css-loader传参问题

• 1.1.1

  • 修复对 CSS Modules 的支持问题

• 1.1.0

  • 支持在create-react-app脚手架中使用stylus、less、sass等

• 1.0.0

  • 支持在umi项目中使用stylus等