0

我已经下载了一个推荐添加的 npm 模块：

<link href="node_modules/ng2-toastr/bundles/ng2-toastr.min.css" rel="stylesheet" />
<script src="node_modules/ng2-toastr/bundles/ng2-toastr.min.js"></script>

到我的 index.html 文件。

有没有一种方法可以要求来自 angular2 组件的与 Webpack 2 相同的引用？

例如

import 'ng2-toastr.min.js'

在组件中？

4

1 回答 1

0

说明中给出的建议很奇怪。你不应该包含<script>标签，因为你使用的是 webpack，脚本将作为 webpack 包的一部分自动加载。

至于css，您也可以使用 webpack。首先，您需要安装适当的加载器才能加载css文件并将样式应用于 dom：

npm install --save style-loader raw-loader

然后在你的打字稿文件的某个地方你可以做：

import 'style!raw!../node_modules/ng2-toastr/ng2-toastr.css'

（请注意，您的相对路径../node_modules可能因应用程序中的嵌套级别而异。

style!和raw!前缀是 webpack 通过"loaeers"处理给定脚本的 指令。

raw加载程序将按原样读取 css 文件而不尝试进行任何进一步处理（css!如果您需要@import从文件中执行其他操作，则可以使用加载程序.css，但在这种情况下，这不是必需的，所以最简单的是原始的装载机。

加载器style获取加载器加载的 cssraw并以编程方式将其应用到当前页面 dom。它实际上并没有创建<style>带有 a 的标签src="url...."，但它实现了重要的部分，即确保加载的 css 中的样式被加载到页面上。

如果您需要经常这样做，您可以随时将加载程序配置添加到您的webpack.config.js：

module: {
  loaders: [
     {test: /\.tsx?$/, loader: 'ts-loader'},
     {test: /\.css$/, loader:'style!raw'}
  ] 
}

然后你可以这样做：

import '../node_modules/ng2-toastr/ng2-toastr.css'
于 2016-11-07T07:58:47.343 回答