Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了如何在Angular2中包含来自npm的css大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
这一点令人惊讶地难以找到答案,请指出如果我没有正确搜索,这是一个重复的问题.

我有一个Angular2(2.0.0-beta.14)应用程序,我遇到的问题包括第三方css文件.我已经通过npm下载了materialize-css,我可以看到该文件位于node_modules / materialize-css / bin / materialize.css.

我希望这个css文件对我的整个应用程序可见.

在最高级别,我已经尝试将其包含在我的index.html头部分< link rel =“stylesheet”href =“./ node_modules / materialize-css / bin / materialize.css”media =“screen”>,但无法弄清楚它在哪里服务,或者即使它正在服务.

在较低级别,我尝试在应用程序启动的styleUrls标记中定义它.

@Component({
  SELEctor: 'myApp',providers: [],pipes: [],directives: [ROUTER_DIRECTIVES],templateUrl: 'app/henna.html',styleUrls: ['materialize.css']
})

我尝试了各种不同的styleUrls试图找到该文件,但似乎问题可能是该文件无法访问.

请告诉我任何需要帮助的信息,这是我第一次使用Angular2的应用程序.

解决方法

这是一个问题,webpack没有捆绑我的文件我的期望(我之前从未使用过webpack).我需要为css和字体文件安装正确的webpack加载器,导入实体化,然后包含文件.

安装正确的加载器(npm install css-loader npm install file-loader)后,在webpack.config.js中我需要修改模块对象.

@H_278_15@module: { loaders: [ { test: /\.ts$/,loader: 'awesome-typescript-loader' },{ test: /\.css$/,loader: "style-loader!css-loader" },{ test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,loader : 'file-loader'},] }

在vendor.js文件中,我需要导入materialize js和css

import 'materialize-css/bin/materialize.css'
import 'materialize-css/bin/materialize.js'

大佬总结

以上是大佬教程为你收集整理的如何在Angular2中包含来自npm的css全部内容,希望文章能够帮你解决如何在Angular2中包含来自npm的css所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。