大佬教程收集整理的这篇文章主要介绍了如何在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的应用程序.
安装正确的加载器(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,请注明来意。