編譯自定文件夾中的所有文件，手寫筆及其子

Question

例如編制該文件夾結構，

x.styl 
|--abc/ 
|--|--a.styl 
|--efg/ 
|--|--b.styl 

要

build/ 
|--x.css 
|--abc/ 
|--|--a.css 
|--efg/ 
|--|--b.css 

從文件夾及其子文件夾使用手寫筆的編譯器（編譯STYL文件）

Answer 1

我懷疑使用stylus命令行，但您可以使用像gulp這樣的構建工具輕鬆解決此問題。

下面是我如何使用gulp完成此任務的一個簡單示例。

- 使用g4p V4並使用ES6生成的Gulp文件。

import stylus from 'gulp-stylus' 
 

 
const paths = { 
 
    app: { 
 
     source: ['src/app.js', 'src/*.js', 'src/**/*.js'], 
 
     dest: 'build/', 
 
     build: 'build/app.js', 
 
    }, 
 
    tests: { 
 
     source: 'tests/**/*.js', 
 
     pre_tests: [ 
 
      'tests/pre_test.js' 
 
     ] 
 
    }, 
 
    styles: { 
 
     source: 'styles/**/*.styl', 
 
     dest: './build/css' 
 
    }, 
 
} 
 

 
//- styles task ran with gulp#4.0 
 

 
export const styles =() => { 
 
    return gulp.src(paths.styles.source) 
 
     .pipe(stylus()) 
 
     .pipe(gulp.dest(paths.styles.dest)) 
 
}

Link to full gulpfile

希望這有助於！

Answer 2

你可以使用--out參數構建和定位整個文件夾，它會保留你的結構，首先你可以定位一個文件或文件夾，並且在你想要編譯後的文件夾或文件名後輸入css

stylus -c ./project/stylus --out ./myfolder/css

爲：

|stylus 
|--abc/ 
|--|--a.styl 
|--efg/ 
|--|--b.styl 

這將導致類似：

|css 
|--abc/ 
|--|--a.css 
|--efg/ 
|--|--b.css