Concat All SASS files first like GULP

[rbaindourov]

Hi There,

I am having some interesting errors trying to migrate my project to angular meteor. The previous project would use gulp to concat all the *.scss files in a sass folder, and then compile the sass into CSS.

I am not able to get this same behavior just dragging and dropping the sass folder into angular-meteor project with your sass module.

I am getting errors such as /client/sass/components/ebt.scss: Scss compiler error: no mixin named border-radius

Because we are only meant to have one entry point into the SASS and its /client/sass/app.scsss

Which includes all the components, and as you can see we have _variables.scss, _mixins.scss, _placeholders.scss, in our sass folder next to the app.scss file.

// Our Variables & Mixins
@import "variables";
@import "mixins";
@import "placeholders";
@import "fonts";

// Bootstrap
@import "bootstrap";

// Our Global SASS Files (order matters)
@import "shared/global";
@import "shared/typography";
@import "shared/nav";
@import "shared/content";
@import "shared/footer";
@import "shared/breadcrumbs";
@import "shared/forms";
@import "shared/tables";

// Our Page-Level SASS Files (order doesn't matter)
@import "components/home";
@import "components/messaging";
@import "components/privacy";
@import "components/terms-of-service";
@import "components/articles";
@import "components/ebt";

So my question is, how can I configure this plugin to work just like gulp does, or what are the edits I need to make it work?

    // CSS TASK:
    // 1. Load master SASS file (which loads all other files)
    // 2. Generate CSS in nested / compressed format
    // 2-bis. concatenate other CSS files (from libraries)
    // 3. Run autoprefixer with out browser support list
    // 4. Output to dev-portal-public/css
    gulp.task('css', function() {
      var sassSrc = gulp.src(config.paths.source + 'sass/app.scss')
        .pipe(
            sass({
                includePaths: [
                    config.paths.bower + 'bootstrap-sass-official/assets/stylesheets'
                ],
                outputStyle: config.env === 'local' ? 'nested' : 'compressed'
            })
            .on('error', function(error) {
                return notify().write(error);
            })
        );

      var otherCss = gulp.src([
        config.paths.bower + 'messaging/release/messaging.css'
      ]);

      return es.concat(
        otherCss, sassSrc
      ).pipe(concat('app-' + config.token + '.css'))
      .pipe(autoprefixer("last 2 versions", "ie > 9", "Android >= 4"))
      .pipe(gulp.dest(config.paths.public + 'assets/css'))

        // Push CSS changes to brower without reload
        .pipe(browserSync.stream());
    });

Thanks

[sebakerckhof]

You need to give all files that are not entry-point files a name that starts with an underscore. Or, if you need more advanced control, you can create a meteor package, where you can specify per file whether it's an import or not. But for your situation, the first option seems easiest.

[rbaindourov]

Thank you for the advice!