将CSS框架添加到角供应商包中

Question

以下是我的情况：

• 角4驱动的网站
• 用角起动器套件初始化
• 使用语义用户界面作为CSS框架

以下是我的问题：

在webpack的基础上加入语义用户界面没有任何影响。

以下是我尝试过的：

(我跟踪了webpack的官方角度文件)

从终端向package.json添加语义-ui

npm install semantic-ui-css --save

将供应商包添加到webpack.common.js中的entry属性

[...]
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检查它)，并且我没有看到vendor.bundle.js文件在dist文件夹中。

我可能错过了什么，是什么？

Answer 1

下面的语句只导入semantic.js，因为package.json指向该文件。

import 'semantic-ui-css';

要导入CSS，可以添加以下内容：

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

或在src/styles/styles.scss中

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