Skip to content

Easy to use stylus、less and sass in umijs2 or create-react-app.

License

Notifications You must be signed in to change notification settings

fengxinming/chain-css-loader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

chain-css-loader

简化在 umicreate-react-app 中使用 stylus, 也支持lesssass.(目前支持 css-loader@2)

npm package NPM version NPM Downloads


目录


安装

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

高级特性

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

高级特性

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

使用事例


更新记录

  • 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脚手架中使用styluslesssass
  • 1.0.0

    • 支持在umi项目中使用stylus

Releases

No releases published

Packages

No packages published