使用基础6 scss与角度2 cli

使用webpack,实现基础非常简单.目前我正在使用Angular2 Webpack Starter.

>通过npm安装基础站点
>在vendor.ts文件中导入foundation-sites.像这样：

进口’基金会网站’;
>在app.scss中导入基础scss文件,如下所示：

@import’~foundation-sites / scss / foundation’
>包括您喜欢的mixins.

@include foundation-global-styles;
@include奠基 – 排版;

Angular CLI(没有webpack)

要在项目中包含外部sass文件,您必须更改角度cli构建文件.角度cli基于ember cli并使用西兰花来编译您的资产. codementor website上有一篇关于此的优秀文章.

简而言之,您必须为西兰花安装额外的node_modules并更改angular-cli-build.js文件.

运行以下命令以安装额外的node_modules：

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

这里参考的是我的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 });
};

在.scss文件中,您可以包含基础sass文件,如下所示：

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