は角度ベンダーバンドル

Question

にCSSフレームワークを追加します。ここに私の状況です：ここではCSSフレームワークとしてSemantic UI

を使用してAngular 4Angular Starter Kit

で初期化

を搭載し

• Webサイトが私です問題：

  ウェブにSemantic UIを追加するackは効果がありません。ここで

  は、私が試したものです：

  （私はofficial Angular documentation for webpackに続い）

  エントリにベンダーバンドルを追加し、端末

  npm install semantic-ui-css --save 
  

  からpackage.jsonにセマンティック-UI を追加します。プロパティのwebpack.common.js

  [...] 
  entry: { 
  
      'polyfills': './src/polyfills.browser.ts', 
      'main':  AOT ? './src/main.browser.aot.ts' : 
         './src/main.browser.ts', 
      'vendor': './src/vendor.ts' 
  
  }, 
  [...] 
  

  src/vendor.tsファイルを作成し、にその内容を設定します。私が得たもの

  // Angular 
  import '@angular/platform-browser'; 
  import '@angular/platform-browser-dynamic'; 
  import '@angular/core'; 
  import '@angular/common'; 
  import '@angular/http'; 
  import '@angular/router'; 
  
  // My CSS framework 
  import 'semantic-ui-css'; 
  

  ：

  のWebPACKは、エラーなしで構築し、ベンダーのバンドルが作成されます。
  vendor.bundle.js 3.74 MB 2 [emitted] [big] vendor

  そして、 webpackは、バンドルスクリプトをHTMLページに挿入します。

  <script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js" async></script></body> 
  

  ビジュアルは変更されません（ただし、CDNで確認する必要があります）distフォルダにvendor.bundle.jsファイルが表示されません。

  私はおそらく何かが恋しいですね。

Answer 1

以下の文はsemantic.jsのみをインポートします。package.jsonはそのファイルに と指定しています。

import 'semantic-ui-css'; 

CSSをインポートするには、以下を追加することができますし（

// To import CSS 
import 'semantic-ui-css/semantic.css'; 

をOR のsrc /スタイル/ styles.scss

@import '../../node_modules/semantic-ui-css/semantic.css';