我正在尝试使用npm工具和软件包将LESS文件和ES6文件复制并编译/转换到另一个目录。
这是我的基本结构:
-src
-components
-component1
component1.js // es6 code
styles.less
-component2
component2.js // es6 code
styles.less
-component3
component3.js // es6 code
styles.less
这是所需的新目录结构:
-lib
-component1
component1.js // es5 code
styles.css
-component2
component2.js // es5 code
styles.css
-component3
component3.js // es5 code
styles.css
对于es6 transile我正在使用babel
并且效果很好:
"build:js": "cross-env NODE_ENV=production babel ./src/components --out-dir ./lib --ignore spec.js"
但我对LESS
文件感到困惑。我知道我可以使用cpx
复制文件并保留结构:
"build:less": "cpx \"./src/components/**/*.less\" ./lib"
但我想在处理每个文件时复制它们并将其从LESS
编译为CSS
。
对于通过管道传递的每个文件的模块转换有一个-t
参数,但我找不到合适的模块来传递它们。
我尝试了lessc
和lessify
,但这似乎不合适。
"build:less": "cpx \"./src/components/**/*.less\" ./lib -t [less_compiler_here?]"
我不介意使用webpack
或任何其他模式来实现这一目标。
答案 0 :(得分:0)
在这里回答我自己的问题
我没能找到适合我情况的解决方案。在测试了很多npm软件包后,我发现每个软件包都为我的挑战提供了一小部分解决方案,我决定编写自己的解决方案。
lessc-glob
基本上它需要glob
并将结构从源复制到目标(使用cpx),但它通过less
转换流传递每个文件。当然,它最终会将文件扩展名更改为.css
。
这是一个非常适合我的确切挑战的解决方案,但也许有人会发现它很有用
如果你愿意,可以随意使它更好。