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 }));
});

问题是：有一种方法可以包含pagesCSS任务使用的common.styl吗？

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

Answer 1

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

或...

您可以使用配置对象中已有的import选项。手写笔将在每个文件的开头单独包含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文件作为依赖项来编译另一个

1 个答案: