Menu icon Foundation
How do I add addition scss files and have them compile with Yeti Launch?

How do I add a second (or more) scss files to my project? I can add them manually, but they don't get picked up by the compiler. 

A similar question was asked once before but it wasn't answered. Some recommendations were made in it for alternatives, but I feel like there has to be an answer to this question out there some where. I'd like to be doing it in my project right now too.

The best suggestion I found from the last post didn't work for me. It said: 

Change scss/app.scss to wildcard *, and gulp will compile all your .scss file into respective .css.

gulp.task('sass', function() {
  return gulp.src('scss/*.scss')

credit user: Brian Tan

Someone else said the following, but it was pointed out that this will add all the scss files into the same css file - so this won't work for me either. 

1. Inside the scss folder, change the app.scss to style.scss
2. In the gulp.js file, change the words from "app" to "style" to look like this: return gulp.src('scss/style.scss')
3. Remove the word "css" from the piped destination in the end of the gulp function, it will look like this: .pipe(gulp.dest('')); So, it's just blank between the single quotes. Not sure if there is a better method for this?

credit user: Mark Szymanski

Some background on me: I'm very new to this. I've used Foundation and Sass many times, and in the past I downloaded Foundation from the browser and compiled my scss using Koala. Before I started this project I downloaded Yeti Launch from the browser and created a new project within it. Now, however, I haven't been able to make any progress because I can't get my scss to compile. 

Any advice is greatly appreciated!! Thanks!

yetilaunchyeti launchscssSasscompilecss

How do I add a second (or more) scss files to my project? I can add them manually, but they don't get picked up by the compiler. 

A similar question was asked once before but it wasn't answered. Some recommendations were made in it for alternatives, but I feel like there has to be an answer to this question out there some where. I'd like to be doing it in my project right now too.

The best suggestion I found from the last post didn't work for me. It said: 

Change scss/app.scss to wildcard *, and gulp will compile all your .scss file into respective .css.

gulp.task('sass', function() {
  return gulp.src('scss/*.scss')

credit user: Brian Tan

Someone else said the following, but it was pointed out that this will add all the scss files into the same css file - so this won't work for me either. 

1. Inside the scss folder, change the app.scss to style.scss
2. In the gulp.js file, change the words from "app" to "style" to look like this: return gulp.src('scss/style.scss')
3. Remove the word "css" from the piped destination in the end of the gulp function, it will look like this: .pipe(gulp.dest('')); So, it's just blank between the single quotes. Not sure if there is a better method for this?

credit user: Mark Szymanski

Some background on me: I'm very new to this. I've used Foundation and Sass many times, and in the past I downloaded Foundation from the browser and compiled my scss using Koala. Before I started this project I downloaded Yeti Launch from the browser and created a new project within it. Now, however, I haven't been able to make any progress because I can't get my scss to compile. 

Any advice is greatly appreciated!! Thanks!

James Stone about 1 year ago

It really depends on what you are trying to do. The easiest way is to add an import statement into your app.scss file.

@import "some-component";

This will import the file in your scss directory called "_some-component.scss"

As your project grows, you can place files into directories.

Ideally, you should end up with a single css file that is loaded in your web page. The above method provides that.

There are special use cases to developing specific files and compiling many of them, but that is not likely what you are looking for.

Gregg Phelps about 1 year ago

Thanks for the reply! 

For this particular project I need to have separate css files for different elements within the page. I am going to combine them into a global sheet too, as you mentioned, through an import. In addition, however, I do need the seperate css files too. 

If I create a new scss file within the scss directory, and then I create the companion css file within the css directory - how do I then get Yeti Launch to watch my new files and automatically compile them as it already does for the app.scss file?

Thanks!