使用具有角度2 cli的基礎6 scss

Question

如何使用角度cli的基礎6.I嘗試使用普通的scss但是無法繼續使用基礎6 scss.How我應該如何進行此操作。 提前致謝。

Answer 1

使用Angular CLI創建一個新的“sassy”項目：

ng new sassy-project --style=sass

然后通過NPM安裝Foundation Sites：

npm install foundation-sites --save

最后在項目styles.scss文件中導入Foundation SASS-File：

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

有關更多詳細信息，請訪問： https ： //github.com/angular/angular-cli#css-preprocessor-integration

Answer 2

您是使用角度cli還是webpack啟動包？

使用webpack，實現基礎非常簡單。 目前我正在使用Angular2 Webpack Starter 。

1. 通過npm安裝基礎站點

2. 在vendor.ts文件中導入foundation-sites。 像這樣：

   進口'基礎網站';

3. 在app.scss中導入基礎scss文件，如下所示：

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

4. 包括您喜歡的mixins。

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

Angular CLI（沒有webpack）

要在項目中包含外部sass文件，您必須更改角度cli構建文件。 角度cli基於ember cli並使用西蘭花來編譯您的資產。 在codementor網站上有一篇關於此的優秀文章。

簡而言之，您必須為西蘭花安裝額外的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";