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

Question

如何使用角度cli的基础6.I尝试使用普通的scss但是无法继续使用基础6 scss.我该如何处理这个问题.提前致谢.

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";