将 CSS 框架添加到 Angular 供应商bundle中

Question

这是我的情况：

• 由 Angular 4 提供支持的网站
• 使用 Angular 入门套件初始化
• 使用语义UI作为CSS框架

这是我的问题：

将语义 UI 添加到 webpack 是没有效果的。

这是我尝试过的：

(我遵循了 webpack 的官方 Angular 文档)

从终端向package.json添加语义 UI

npm install semantic-ui-css --save

将供应商捆绑包添加到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

下面的语句只导入语义.js正如package.json所指向的那样 到该文件。

import 'semantic-ui-css';

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

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

OR in src/styles/styles.scss

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