How do I install SASS with Mean.io?


Tags: css,sass,mean.io

Problem :

I have a basic MEAN.io setup. What's confusing me is the package structure. I'd like to use .scss files and compile SASS into .css files in the final version, but I'm not 100% sure how this works, as I'm just trying to learn.

I've already read the documentation provided by the MEAN.io team, regarding how I can make css files 'global', but I still am not sure how to preprocess .scss files.

I haven't tried much, as I'm not really sure what to do. MEAN.io seems to use Gulp by default. I never received a prompt asking me if I prefered Gulp or Grunt (as is shown in MEAN.io's blog).

Any help or examples would be very helpful. I've looked on Google, but most of the stuff I found was MEAN.js stuff. :(

Thanks!



Solution :

To process .scss files you can pretty much copy the less configuration.

  1. Install gulp sass

    npm install gulp-sass --save-dev

  2. Update gulp/development.js

    paths = { ... sass: [ 'packages/**/*.scss', '!packages/**/node_modules/**', '!packages/**/assets/**/lib/**'], ... };

  3. Create a gulp task to run sass

    gulp.task('sass', function() { return gulp.src(paths.sass) .pipe(plugins.sass().on('error', plugins.sass.logError)) .pipe(gulp.dest('./packages')); });

  4. At this point you should be able to run gulp sass and it should work but in order for it to run and watch files when you run gulp see the next two steps.

  5. Add gulp task to defaultTasks (you can remove less if you desire)

    var defaultTasks = ['coffee','clean', 'less', 'sass', 'csslint', 'devServe', 'watch'];

  6. Add a watch task

    gulp.task('watch', function () { ... gulp.watch(paths.sass, ['sass']); });


    CSS Howto..

    How do I remove the underline from an image wrapped in an anchor?

    How can I use :hover with multiple classes

    How do you get this result, using Jquery Scroll Event & offset/position, css or javascript?

    How to get MathJax's HTML output just like Stackedit.io?

    How can I stop an image element from taking 100% width?

    How to reference / link to a Css-File styling elements in a webview for Android

    Chrome (webkit?) not displaying images correctly in a slideshow

    How can I get an absolute element to float right within its parent?

    How to make hyperlink for a background image?

    how to create 3 columns in HTML+CSS and group 2 div elements in the third column

    How can I use CSS to select and style all LI elements that have UL sub-elements? [duplicate]

    Mapbox GeoJSON loaded via local URL: icons not showing popup properties

    HOW DO I MOVE THIS DIV UP TO BE ALLIGNED WITH THE FORM BOX [closed]

    How style DIV when the id inclue strings in php?

    How do i make my Jittery DropDown Menu stable?

    how to remain the style of GUI component after disabling it in javafx?

    Javascript: How to highlight some numbers or text within a line or paragraph?

    How to center absolutely positioned elements in css for a pdf

    How to concatenate icons into a single image with ImageMagick?

    How to make a basic event calendar with javascript, jquery, html and css?

    How to change class named active into link's active attribute in javascript

    How do I vertically align my multi-line p tag in my header?

    How to add a close button to alertify log with CSS?

    How can I opt out of a CSS style on a case-by-case basis?

    Ionic Side Menu Not Showing Content

    How can I use AngularJS directive to apply css style for a string?

    How to make a number of breaks in CSS? [closed]

    How can I use CSS to add a blank column between paired column groupings?

    How to keep animated gifs animated while scrolling on iOS devices?

    How to make a simple pure css or jquery image toggle?