ファンデーション6を使用して角度2 cliで

Question

ファンデーション6を角度cliで使用する方法。プレーンなscssで試しましたが、ファンデーション6 scssを使用することができませんでした。前もって感謝します。

Answer 1

angle cliまたはwebpackスターターパッケージを使用していますか？

webpackでは、基礎を実装するのが非常に簡単です。現時点では私はAngular2 Webpack Starterを使用しています。

1. NPM経由でvendor.tsファイル内

2. インポート基盤-サイトを基盤-サイトをインストールします。同様に：

   import 'foundation-sites';このようなあなたのapp.scssで

3. インポート基礎SCSSファイル：

   @import '〜基礎-サイト/ SCSS /基盤'

4. は、お好みのミックスインを含めます。

   @include foundation-global-styles; @を含む。

角度CLI（WebPACKのなしに）

プロジェクトで外部のSASSファイルを含めるには、角度のCLIビルドファイルを変更する必要があります。角型cliはember cliに基づいており、ブロッコリーを使用して資産をコンパイルします。 codementor websiteにはこれに関する優れた記事があります。

要するに、ブロッコリーのために余分なnode_modulesをインストールし、angle-cli-build.jsファイルを変更する必要があります。

余分node_modulesインストールするには、次のコマンドを実行します。ここでは参考のため

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

は私の角度-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 }); 
}; 

あなたは基礎SASSを含めることができます.scssファイルであるが

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

Answer 2

Angular CLIで新しい「sassy」プロジェクトを作成します。

ng new sassy-project --style=sass 

次にNPM経由で財団のサイトをインストールします。詳細については

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

：

npm install foundation-sites --save 

最後のプロジェクトでstyles.scssファイルを財団SASS-ファイルをインポートしますhttps://github.com/angular/angular-cli#css-preprocessor-integration