使用带有 angular 2 cli 的基础 6 scss

Question

如何将 foundation 6 与 angular 一起使用 cli.I 尝试使用纯 scss 但无法继续使用 foundation 6 scss.How 我应该继续吗？提前致谢。

Answer 1

您使用 angular cli 还是 webpack 启动包？

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

通过 npm 安装基础站点
在您的 vendor.ts 文件中导入基础站点。像这样：

导入'foundation-sites';
像这样在 app.scss 中导入基础 scss 文件：

@import '~foundation-sites/scss/foundation'
包括您喜欢的混入。

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

Angular CLI（没有 webpack）

要在您的项目中包含外部 sass 文件，您必须更改 angular cli 构建文件。 angular cli 基于 ember cli 并使用 broccoli 来编译您的资产。 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";

Answer 2

使用 Angular CLI 创建一个新的 "sassy" 项目：

ng new sassy-project --style=sass

然后通过 NPM 安装 Foundation Sites：

npm install foundation-sites --save

最后导入Foundation SASS-项目中的文件styles.scss文件：

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

更多详情： https://github.com/angular/angular-cli#css-preprocessor-integration

使用带有 angular 2 cli 的基础 6 scss

using foundation 6 scss with angular 2 cli

angular

zurb-foundation-6

angular-cli