Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Amber Hoddinott
Amber Hoddinott
6,494 Points
Posted by Amber Hoddinott
Amber Hoddinott
6,494 Points

Difficulty compiling my sass file to my css folder

this is my code in: gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function(){
    return gulp.src('.sass/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./cssone'));
});

files in sublime text in order (the indented names are the files inside the folder above them)

(folder)project
             node_modules
             gulpfile.jss
             package.json

(folder)scss
            stylesheet.scss

(folder)cssone
            normalize.css

.Hi thank you firstly to anyone in advance who replies to this. I have been trying to learn how to link my scss file to my css fine so that the compile. I have downloaded and check that i have all the programs in need so i know that everything is installed correctly.

in my command promp when i write : 'gulp' i get the response 'task default is not in your gulpfile' so i write 'gulp sass' into my command prompt to tell it where to find the task.

The command prompt says...

using gulpfile ~desktop\project\gulpfile.js starting 'sass'... finishing 'sass' after 22 ms

then it says belowig using gulpfile.

i believe it is all linked up and working, but i dont get my new style sheet appear in my cssone folder?

note:i called the css folder cssone as i already have a css folder for bootstrap, and i was worried that is wasnt working because it was confused and didnt know where to send the css style sheet.

please can anyone see what im doing wrong, im and finding this the hardest thing ive come across before since i started learning web development . hope that this all makes sense, its hard to type it all out.

Amber Hoddinott
Amber Hoddinott
6,494 Points
Amber Hoddinott
Amber Hoddinott
6,494 Points

sorry they change the layout of my text: the folders are the name right night to the word folder in brackets, then next to that is each file thats in that folder.

7 Answers

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

Amber,

This is a snippet off of one of my gulpfiles, see if this helps you. It also includes a default tasks so running gulp without anything else will run the watcher.

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('styles', function(){
  gulp.src(['sass/**/*.scss'])
    .pipe(sass())
    .pipe(gulp.dest('cssone/'))
});

gulp.task('default', function(){
  gulp.watch("sass/**/*.scss", ['styles']);
});
Amber Hoddinott
Amber Hoddinott
6,494 Points
Amber Hoddinott
Amber Hoddinott
6,494 Points

hi Tim... im sorry but what is the watcher i put the code in and now when i type gulp or gulp sass its says 'no gulp file found'?

Amber Hoddinott
Amber Hoddinott
6,494 Points
Amber Hoddinott
Amber Hoddinott
6,494 Points

sorry got confused, i had gone out my project folder.... back to ..... what is the watcher?

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

The watcher tells gulp to keep running and monitoring the sass folder for changes. When a change in your file happens (while you're editing) it'll run the specified task (in this case "styles") so while you work your Sass files will get compiled on-the-fly.

Amber Hoddinott
Amber Hoddinott
6,494 Points
Amber Hoddinott
Amber Hoddinott
6,494 Points

amazing thank you.. that's going to be great. even more great when my scss and css are compiled. still isnt working. oh code looks the same too, so it must be something to do with the paths of linking the files to the function?

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

I just wanted to make sure I understand your folder structure. The sass folder is within the project folder correct? So when you're at the root of the project you see both your gulpfile.js and your sass and cssone folders?

Amber Hoddinott
Amber Hoddinott
6,494 Points
Amber Hoddinott
Amber Hoddinott
6,494 Points

no my sass folder isnt in the project folder it on its own. The gulpfile.js is in the project folder and the cssone folder is also on its own.

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

That's your problem, you want those files to me within your project. Your CSS file especially needs to be accessible in your browser with the HTML files that you'll have within your project.

Think of it like this:

  • cssone
    • application.css
  • sass
    • application.scss
  • node_modules
  • gulpfile.js
  • package.json
  • index.html

Often I'll create an assets folder on the root that can hold both the css and sass folders.

Amber Hoddinott
Amber Hoddinott
6,494 Points
Amber Hoddinott
Amber Hoddinott
6,494 Points

thank you for your help. i still havent managed it though. my folders are now as follows....

project(folder) ...inside my project folder i have cssone folder with my normalize css and thats all at the moment (praying for my css style sheet to appear though)

                     inside my project folder the next folder is node_modules
                     next in my proect folder is my sass folder,and inside my sass folder(which is in my project folder still) i have my gulpfile.js, package.json, and sytlesheet.scss

the files in my projects folder that dont have a folder are all my html files

so....if you can help and i havent confused you id be so grateful :) .

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

Your gulpfile.js and your package.json file should be at the root of the folder. The only thing in your sass folder should be your sass files. That's it. All of your gulp and node modules are all at the root of your project.

/project/
└── css
     └── normalize.css
└── sass
     └── stylesheet.scss
└── node_modules
└── gulpfile.js
└── package.json
└── index.html

You'll then run the gulp command from the root of the project.

Amber Hoddinott
Amber Hoddinott
6,494 Points
Amber Hoddinott
Amber Hoddinott
6,494 Points

omg thank you so so much, it worked!!! i had to sleep last night i dont know where you are but im in the uk and it was 4am in the morning. joys of learning coding ;) woke up thismorning read your last message, did what you said and way hey!!!!! :D thank you so much for your help!! im so greatful i dont think i would have been able to work that out on my own.

im new to using sass, i am i correct in this that all the sass files i make with .scss will confile into my cssone folder when i type gulp sas into the command prompt, and with your peice of code (watch) you gave me if i type gulp before i start working on a scss file that my css style sheet will be updated automatically. This may seen silly questions but i just want to be sure i am understanding things properly. :)

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

Amber,

You're correct, if you just type in gulp in the command line of the project folder that will start the watcher so it will compile everything on the fly and your CSS files will be compiled into your /cssone/ folder. Otherwise you can also run gulp sass and that will do a one-off compile of your Sass code into that folder.