I'm trying to copy and compile / transform LESS files and ES6 files to another directory using npm tools and packages.
This is my basic structure:
-src
-components
-component1
component1.js // es6 code
styles.less
-component2
component2.js // es6 code
styles.less
-component3
component3.js // es6 code
styles.less
And this is the desired new directory structure:
-lib
-component1
component1.js // es5 code
styles.css
-component2
component2.js // es5 code
styles.css
-component3
component3.js // es5 code
styles.css
For the es6 transpile I'm using babel
and it works great:
"build:js": "cross-env NODE_ENV=production babel ./src/components --out-dir ./lib --ignore spec.js"
But i struggle with the LESS
files. I know i can use cpx
to copy files and keep the structure:
"build:less": "cpx \"./src/components/**/*.less\" ./lib"
But i want to copy them while processing each of them and compile it from LESS
to CSS
.
There is a -t
argument for a module transformation of each file passed through the pipeline but i can't find a proper module to pass them through.
I tried lessc
and lessify
but it doesn't seem like a good fit.
"build:less": "cpx \"./src/components/**/*.less\" ./lib -t [less_compiler_here?]"
I don't mind using webpack
or any other pattern to achieve this.
Answering my own question here
I failed to find a fit solution to my situation. After testing a lot of npm packages i found out that each package provides a small part of the solution to my challenge, I decided to write my own solution.
lessc-glob
Basically it takes a glob
and copy the structure from source to target (using cpx) but it passes each file through a less
transform stream. Of course it changes the file extension to .css
in the end. This is a very tailored solution to my exact challenge but maybe someone will find it useful.
Feel free to make it better if you want to.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.