Skip to content

Conversation

@loljoho
Copy link

@loljoho loljoho commented Aug 8, 2015

Whenever I scaffold with this generator I've ended up adding this single line.

I hate having everything in a single index.scss so I create partials with filenames prefixed by _ (e.g. _variables.scss, _mixins.scss) which often need to be loaded in a specific order.

My index.scss often ends up looking something like this:

@import 'core/styles/variables';
@import 'core/styles/mixins';
// etc, etc...

/**
 *  Do not remove this comments bellow. It's the markers used by wiredep to inject
 *  sass dependencies when defined in the bower.json of your dependencies
 */
// bower:scss
// endbower

/**
 *  Do not remove this comments bellow. It's the markers used by gulp-inject to inject
 *  all your sass files automatically
 */
// injector
// endinjector

By ignoring the _-prefixed partials along with index.scss in the styles.js Gulp file, this allows the developer to @import whichever files he or she wishes in whatever order, rather than leaving it up to the rest of the Gulp tasks.

In the project on which I am currently working, this changes the original styles.js at line 19 from:

  var injectFiles = gulp.src([
    path.join(conf.paths.src, '/app/**/*.scss'),
    path.join('!' + conf.paths.src, '/app/index.scss')
  ], { read: false });

...to this:

  var injectFiles = gulp.src([
    path.join(conf.paths.src, '/app/**/*.scss'),
    path.join('!' + conf.paths.src, '/app/**/_*.scss'),
    path.join('!' + conf.paths.src, '/app/index.scss')
  ], { read: false });

Sorry, still new to contributing--let me know if there's anything I could have done better.

Cheers :)

Whenever I scaffold with this generator I've ended up doing this.

I hate having everything in a single `index.scss` so I create partials with filenames prefixed by `_` (e.g. `_variables.scss`, `_mixins.scss`) which often need to be loaded in a specific order.  

My `index.scss` often ends up looking something like this:

```scss
@import 'core/styles/variables';
@import 'core/styles/mixins';
// etc, etc...

/**
 *  Do not remove this comments bellow. It's the markers used by wiredep to inject
 *  sass dependencies when defined in the bower.json of your dependencies
 */
// bower:scss
// endbower

/**
 *  Do not remove this comments bellow. It's the markers used by gulp-inject to inject
 *  all your sass files automatically
 */
// injector
// endinjector
```

By ignoring the `_`-prefixed partials along with `index.scss` in the `styles.js` Gulp file, this allows the developer to `@import` whichever files he or she wishes in whatever order, rather than leaving it up to the rest of the Gulp tasks.

In the project on which I am currently working, this changes the original `styles.js` at line 19 from:

```js
  var injectFiles = gulp.src([
    path.join(conf.paths.src, '/app/**/*.scss'),
    path.join('!' + conf.paths.src, '/app/index.scss')
  ], { read: false });
```

...to this:

```js
  var injectFiles = gulp.src([
    path.join(conf.paths.src, '/app/**/*.scss'),
    path.join('!' + conf.paths.src, '/app/**/_*.scss'),
    path.join('!' + conf.paths.src, '/app/index.scss')
  ], { read: false });
```

Sorry, still new to contributing--let me know if there's anything I could have done better. 

Cheers :)
@Swiip
Copy link
Owner

Swiip commented Sep 8, 2015

Sorry, if you have to change this everytime but it seams not generic enough to be distributed to everyone. I'm sure, every one has it's way of doing this.

@Swiip Swiip closed this Sep 8, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants