使用 .styl 文件作为依赖来编译另一个

Question

我有两个文件：

1 - common.styl（此文件包含将在我项目的所有页面上使用的导入。）

@import 'utils/variables.styl'
@import 'utils/fonts.styl'
@import 'utils/mixin.styl'

2 - home.styl（此文件仅用于我项目的主页部分，取决于 common.styl）

body
  font-family CoolDown
  .box
    background $commonBg

在我的 gulpfile 中，我创建了两个任务，一个用于编译 common.styl，另一个用于编译我项目的所有页面。

普通任务：

gulp.task('commonCSS', function () {
  return gulp.src('src/styles/common.styl')
    .pipe($.plumber())
    .pipe($.stylus({
      'include css': true,
      use: [jeet(), nib(), rupture()],
      import: ['jeet', 'nib', 'rupture']
    }))
    .pipe($.autoprefixer(stylBrowsers))
    .pipe(gulp.dest(paths.build + 'css'))
    .pipe(reload({ stream: true }));
});

我的问题是页面任务，这只有在我将 common.styl 文件放在 src 路径中并连接它们时才有效。但是这样做我需要在文件中输入一个名字。我想使用当前正在编译的 .styl 的名称。

gulp.task('pagesCSS', ['commonCSS'], function () {
  return gulp.src(['src/styles/common.styl', 'src/styles/pages/**/*.styl'])
    .pipe($.plumber())
    .pipe($.concat('**page.css**')
    .pipe($.stylus({
      'include css': true,
      use: [ jeet(), nib(), rupture() ],
      import: ['jeet', 'nib', 'rupture']
    }))
    .pipe($.autoprefixer(stylBrowsers))
    .pipe($.minifyCss())
    .pipe(gulp.dest(paths.build + 'css'))
    .pipe(reload({ stream: true }));
});

问题是：有没有办法包含 common.styl 以供 pageCSS 任务使用？

也许我遗漏了一些东西或使用了错误的解决方案。

Answer 1

你不能只在这些文件中 @import 或 @require common.styl 吗？ @import "../../common" 并且 Stylus 将在每个页面中包含它们，不需要 concat.

或者...

您可以使用配置对象中已有的 import 选项。 Stylus 将在每个文件的开头单独包含 common.styl。

先加paths: ['node_modules', 'src/styles']。这样 Stylus 将知道如何解析导入路径。如果您在下一步中提供完整路径，则可以跳过此步骤。

现在您可以将 common.styl 添加到 import: ['jeet', 'nib', 'rupture', 'common']。

我正在为我的变量使用此配置，因此我不必将它们包含在每个文件中。

完整的例子应该看起来像这样：

gulp.task('pagesCSS', ['commonCSS'], function () {
  return gulp.src('src/styles/pages/**/*.styl')    // <-- only pages styles are piped
    .pipe($.plumber())
    // .pipe($.concat('**page.css**')              // <-- remove this line
    .pipe($.stylus({
      'include css': true,
      use: [ jeet(), nib(), rupture() ],
      paths:  ['node_modules', 'src/styles']       // <-- resolve your styles path
      import: ['jeet', 'nib', 'rupture', 'common'] // <-- add your shared file
    }))
    .pipe($.autoprefixer(stylBrowsers))
    .pipe($.minifyCss())
    .pipe(gulp.dest(paths.build + 'css'))
    .pipe(reload({ stream: true }));
});

使用 .styl 文件作为依赖来编译另一个

Use .styl file as dependency to compile another

dependencies

stylus

task

gulp