Geek Answers Handbook

Using base 6 scss with angular 2 cli

How to use foundation 6 with angular cli.I tried using regular scss, but could not continue working with base 6 scss. How should I continue this. Thanks in advance.

+8
angular angular-cli zurb-foundation-6
source share
2 answers

Are you using angular cli or a package to run webpack?

With webpack, it is very easy to implement the foundation. I am currently using Angular2 Webpack Starter .

  • Install foundation sites via npm

  • Import the base sites into the vendor.ts file. For example:

    import "foundation sites";

  • Import the scss file into the app.scss file as follows:

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

  • Turn on your preferred mixes.

    @ enable basics-global styles; @include background-typography;

Angular CLI (no web package)

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

In short, you need to install an additional node_modules for broccoli and modify the angular-cli-build.js file.

Run the following command to set the optional node_modules:

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

For reference: 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 the sass file as follows:

 @import "node_modules/foundation-sites/scss/foundation";
+4
source share

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

 ng new sassy-project --style=sass

Then install Foundation Sites through NPM:

 npm install foundation-sites --save

Finally, import the SASS file of the Foundation file into the styles.scss file:

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

More details: https://github.com/angular/angular-cli#css-preprocessor-integration

+15
source share

More articles:


All Articles