Question

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

我有一个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的应用程序。

Answer 1

这是一个问题，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'

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

1 个答案: