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

Question

我有两个文件:

1 - common。style (该文件具有将在我的项目的所有页面上使用的导入)

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

2 - home。style (此文件仅用于我的项目的主页部分，并取决于common. style)

body
  font-family CoolDown
  .box
    background $commonBg

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

共同任务:

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

我的问题是页面任务，这只工作，如果我把共同的。样式文件中的SRC路径，并连接它们。但要这样做，我需要在文件中添加一个名称。我想使用当前正在编译的。style的名称。

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任务使用的样式?

可能我遗漏了什么或者使用了错误的解决方案。

Answer 1

你不能只是@import或@require普通。那些文件里的风格?@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 }));
});