向Angular供应商包添加CSS框架

时间:2017-12-05 17:16:31

标签: css angular webpack

以下是我的情况:

这是我的问题:

Semantic UI添加到webpack无效。

这是我尝试过的:

(我跟着official Angular documentation for webpack

从终端

semantic-ui 添加到package.json
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页面中注入了bundle脚本:

<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文件。

我可能会错过一些东西,它是什么?

1 个答案:

答案 0 :(得分:1)

  

下面的语句只导入package.json指向的semantic.js   到那个文件。

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';