Question

如何使用角度cli的基础6.I尝试使用普通scss但是无法继续使用基础6 scss.How我应该如何进行此操作。提前谢谢。

Answer 1

创建一个新的＆＃34;时髦的＆＃34;使用Angular CLI的项目：

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。

通过npm
在vendor.ts文件中导入foundation-sites。像这样：

导入'foundation-sites';
在app.scss中导入基础scss文件，如下所示：

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

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

Angular CLI（没有webpack）

要在项目中包含外部sass文件，您必须更改angular 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";

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

2 个答案: