如何在Angular2中包含来自npm的css

发布时间：2020-12-17 18:09:09 所属栏目：安全来源：网络整理

导读：这一点令人惊讶地难以找到答案,请指出如果我没有正确搜索,这是一个重复的问题. 我有一个Angular2(2.0.0-beta.14)应用程序,我遇到的问题包括第三方css文件.我已经通过npm下载了materialize-css,我可以看到该文件位于node_modules / materialize-css / bin / m

这一点令人惊讶地难以找到答案,请指出如果我没有正确搜索,这是一个重复的问题.

我有一个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中我需要修改模块对象.

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'

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!