将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
文件。
我可能会错过一些东西,它是什么?
答案 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';