using foundation 6 scss with angular 2 cli

Question

How to use foundation 6 with angular cli.I tried with plain scss but was unable to proceed with foundation 6 scss.How should I proceed with this. Thanks in advance.

Answer 1

Create a new "sassy" Project with the Angular CLI:

ng new sassy-project --style=sass

Then install Foundation Sites via NPM:

npm install foundation-sites --save

Finally import the Foundation SASS-File in the projects styles.scss file:

@import "../node_modules/foundation-sites/assets/foundation";

For more Details: https://github.com/angular/angular-cli#css-preprocessor-integration

Answer 2

Do you use the angular cli or the webpack starter package?

With webpack it's very straightforward to implement foundation. At the moment i'm using Angular2 Webpack Starter.

1. Install foundation-sites via npm

2. Import foundation-sites in your vendor.ts file. Like so:

   import 'foundation-sites';

3. Import foundation scss file in your app.scss like this:

   @import '~foundation-sites/scss/foundation'

4. Include your preferred mixins.

   @include foundation-global-styles; @include foundation-typography;

Angular CLI (without webpack)

To include external sass files in your project, you have to change the angular cli build file. The angular cli is based on the ember cli and uses broccoli to compile your assets. There is a excellent article about this on the codementor website.

In short you have to install extra node_modules for broccoli and change your angular-cli-build.js file.

Run the following command to install the extra node_modules:

npm i broccoli-sass broccoli-merge-trees lodash glob broccoli-postcss postcss-cssnext cssnano --save

For reference here is my angular-cli-build.js

const Angular2App = require('angular-cli/lib/broccoli/angular2-app');
const compileSass = require('broccoli-sass');
const compileCSS = require('broccoli-postcss');
const cssnext = require('postcss-cssnext');
const cssnano = require('cssnano');
const mergeTrees = require('broccoli-merge-trees');
const _ = require('lodash');
const glob = require('glob');

var options = {
    plugins: [
        {
            module: cssnext,
            options: {
                browsers: ['> 1%'],
                warnForDuplicates: false
            }
        },
        {
            module: cssnano,
            options: {
                safe: true,
                sourcemap: true
            }
        }
    ]
};


module.exports = function (defaults) {
    let appTree = new Angular2App(defaults, {
        sassCompiler: {
            cacheExclude: [/\/_[^\/]+$/],
            includePaths: [
                'node_modules/foundation-sites/scss/util/util',
                'node_modules/foundation-sites/scss/foundation',
                'src/assets/styles'
            ]
        },
        vendorNpmFiles: [
            'systemjs/dist/system-polyfills.js',
            'systemjs/dist/system.src.js',
            'zone.js/dist/**/*.+(js|js.map)',
            'es6-shim/es6-shim.js',
            'reflect-metadata/**/*.+(js|js.map)',
            'rxjs/**/*.+(js|js.map)',
            '@angular/**/*.+(js|js.map)'
        ]
    });

    let sass = mergeTrees(_.map(glob.sync('src/**/*.scss'), function (sassFile) {
        sassFile = sassFile.replace('src/', '');
        return compileSass(['src'], sassFile, sassFile.replace(/.scss$/, '.css'));
    }));

    let css = compileCSS(sass, options);

    return mergeTrees([appTree, sass, css], { overwrite: true });
};

In your .scss file you can include foundation sass file like this:

@import "node_modules/foundation-sites/scss/foundation";