[英]Angular Universal CSS imports not working
I'm just testing out how Angular Universal handles the imports of third party JavaScript and CSS libraries. 我只是测试Angular Universal如何处理第三方JavaScript和CSS库的导入。 For ease of use I tried with jQuery and Bootstrap. 为了易于使用,我尝试使用jQuery和Bootstrap。
I'm using the Universal Starter repo https://github.com/angular/universal-starter and installed jQuery and Bootstrap through npm. 我正在使用Universal Starter回购https://github.com/angular/universal-starter并通过npm安装了jQuery和Bootstrap。
In my app.component.ts
I included jQuery like so and it works perfectly. 在我的app.component.ts
我像这样包含了jQuery,它运行完美。
import { isBrowser, isNode } from 'angular2-universal'
var jQuery: any = require('jquery');
...
@Component({
changeDetection: ChangeDetectionStrategy.Default,
encapsulation: ViewEncapsulation.Emulated,
selector: 'app',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
title = 'ftw';
ngOnInit(): void {
if (isBrowser) {
jQuery('#universal').css({'color': '#FF0000', 'font-size': '25px'})
}
}
}
Though when I want to import a css file it won't work properly. 虽然当我想导入一个css文件时,它将无法正常工作。 I'm importing it within my app/client.ts
file as follows. 我将其导入到我的app/client.ts
文件中,如下所示。
...
// Angular 2
import { enableProdMode } from '@angular/core';
import { platformUniversalDynamic } from 'angular2-universal/browser';
import { bootloader } from '@angularclass/bootloader';
import { load as loadWebFont } from 'webfontloader';
import 'bootstrap/dist/css/bootstrap.css';
// enable prod for faster renders
enableProdMode();
...
The actual Bootstrap css is within my Webpack bundle but my HTML isn't styled in any way. 实际的Bootstrap css在我的Webpack捆绑包中,但是我的HTML并未以任何方式设置样式。 Anybody had a similar problem with this and knows how to fix this issue? 任何人对此都有类似的问题,并且知道如何解决此问题?
In order to make import 'bootstrap/dist/css/bootstrap.css';
为了使import 'bootstrap/dist/css/bootstrap.css';
work, you'll need style loader , which is not installed with universal-starter repo. 工作时,您将需要style loader ,而该样式加载器未与通用启动器repo一起安装。 Sidenote: If you use bootstrap.css as is, and you want to use universal-starter, you can copy bootstrap.min.css into assets folder and add a link tag for it in index.html. 旁注:如果按原样使用bootstrap.css,并且要使用通用启动器,则可以将bootstrap.min.css复制到资产文件夹中,并在index.html中添加一个链接标记。
Go to the angular-cli.json or angular.json file at the root of your Angular CLI project folder, and find the scripts: [] property, and include the path to jQuery as follows: 转到Angular CLI项目文件夹根目录下的angular-cli.json或angular.json文件,找到脚本:[]属性,并包括jQuery的路径,如下所示:
"scripts": [ "../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"]
Now, to use jQuery, all you have to do is to import it in whatever component you want to use jQuery. 现在,要使用jQuery,您所要做的就是将其导入您想使用jQuery的任何组件中。
import * as $ from 'jquery';
(or)
declare var $: any;
import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
ngOnInit()
{
$(document).ready(function(){
// your code
});
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.