【问题标题】:npm copy and compile LESS files using cpxnpm 使用 cpx 复制和编译 LESS 文件
【发布时间】:2026-02-08 05:35:01
【问题描述】:

我正在尝试使用 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 转译,我使用的是 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 参数,但我找不到合适的模块来传递它们。
我试过lessclessify,但似乎不太合适。

"build:less": "cpx \"./src/components/**/*.less\" ./lib -t [less_compiler_here?]"

我不介意使用webpack 或任何其他模式来实现这一点。

【问题讨论】:

    标签: node.js reactjs less postcss npm-scripts


    【解决方案1】:

    在这里回答我自己的问题
    我未能找到适合我的情况的解决方案。在测试了很多 npm 包后,我发现每个包都为我的挑战提供了一小部分解决方案,我决定编写自己的解决方案。
    lessc-glob
    基本上它需要一个glob 并将结构从源复制到目标(使用cpx),但它通过less 转换流传递每个文件。当然,它最终将文件扩展名更改为.css。 这是针对我的确切挑战的非常量身定制的解决方案,但也许有人会发现它很有用。
    如果您愿意,请随时改进。

    【讨论】:

    • 对我来说,它看起来像是 gulp/grunt 等工具的用例。
    • @seven-phases-max 可能是,尽管我认为当他的整个项目(可能还有其他项目)已经基于npm-scripts 时,他不应该使用 gulp 或 grunt。好吧,至少在我的情况下是这样的。