babel-plugin-import-less
This plugin is used for import module on demand loading.
Install
npm install -D babel-plugin-import-less
Usage
Use for lodash
babel.config.js
var plugins = 'babel-plugin-import-less' library: 'lodash' module: '[little-camel]' ;
app.js
;; ↓var _indexOf = ;;
Use for antd
babel.config.js
var plugins = 'babel-plugin-import-less' library: 'antd' // import module module: 'es/[dash]' // use ES module for tree shaking // or module: 'lib/[dash]' // use commonjs module // import style style: 'style' // use less style for custom theme // or style: 'style/css' // use css style ;
app.jsx
;ReactDOM; ↓// module: 'es/[dash]'var _button = ;// module: 'lib/[dash]'var _button = ;// style: 'style'; // import less style// style: 'style/css'; // import css styleReactDOM;
Use for antd-mobile
babel.config.js
var plugins = 'babel-plugin-import-less' library: 'antd-mobile' // import module module: 'es/[dash]' // use ES module for tree shaking // or module: 'lib/[dash]' // use commonjs module // import style style: 'style' // use less style for custom theme // or style: 'style/css' // use css style ;
app.jsx
;ReactDOM; ↓// module: 'es/[dash]'var _button = ;// module: 'lib/[dash]'var _button = ;// style: 'style';// style: 'style/css';ReactDOM;
Use for @material-ui/core
babel.config.js
var plugins = 'babel-plugin-import-less' library: '@material-ui/core' module: '[big-camel]' ;
app.jsx
;ReactDOM; ↓var _button = ;ReactDOM;
Use for reactstrap
babel.config.js
var plugins = 'babel-plugin-import-less' library: 'reactstrap' module: 'lib/[big-camel]' ;
app.jsx
;ReactDOM; ↓var _button = ;ReactDOM;
Use multiple plugins
babel.config.js
var plugins = 'babel-plugin-import-less' library: 'lodash' module: '[little-camel]' 'lodash' // need a plugin name 'lodash' 'babel-plugin-import-less' library: 'antd' module: 'es/[dash]' style: 'style' 'antd' // need a plugin name 'antd';
Template
The following substitutions are available in module and style template strings.
Template | Example |
---|---|
[little-camel] | componentName |
[big-camel] | ComponentName |
[dash] | component-name |
[underline] | component_name |
Options
library importDefault module style
library
Library name. Suport String, required.
importDefault
Transform import type to default, false means addNamed. Boolean, default to true.
// true;// false;
module
Import module path. Suport string and function type, required.
function return value also suport template string. return null or false won't import module.
var plugins = 'babel-plugin-import-less' library: 'xxx' `lib/` ;
style
Import style path with module. Suport string, function and array type.
function return value also suport template string. return null or false won't import module.
NOTE: if start with '/' then style path will append to library path otherwise append to module path.
style start with "/":
'babel-plugin-import-less' library: 'xxx' module: 'lib/[dash]' style: '/less/[little-camel]' ; ↓var _button = ; ;
style to upper path:
'babel-plugin-import-less' library: 'xxx' module: 'lib/[dash]' style: '../less/[little-camel]' ; ↓var _button = ;;