如何从 webpack angular2 应用程序中的 node_modules 导入 CSS

假设我们从以下入门包开始：https://github.com/angularclass/angular2-webpack-starter https://github.com/angularclass/angular2-webpack-starter

After npm install and npm run start一切正常。

我想添加一个外部 css 模块，例如 bootstrap 4 的 css （并且只有 css）。 （我知道 bootstrap 有一个 bootstrap-loader，但现在我要求通用解决方案，所以请考虑这里的 bootstrap 4，因为它可以是通过 npm 提供的任何其他 css 模块）。

我通过 npm 安装 bootstrap：npm install [email protected] /cdn-cgi/l/email-protection --save

首先我认为添加就足够了import 'bootstrap/dist/css/bootstrap.css';到vendor.browser.ts 文件。

但事实并非如此。

我应该怎么做才能得到正确的解决方案？

我不要求的解决方案：

1. "Copy the external css module to the assets folder, and use it from there"
   • 我正在寻找一个与 npm 包一起使用的解决方案。
2. "Use bootstrap-loader for webpack"
   • 正如我上面所描述的，我正在寻找一个通用的解决方案，引导程序只是这里的一个例子。
3. "Use another stack"
   • 我正在寻找上面提到的入门包中的解决方案。

可以通过使用@import '~bootstrap/dist/css/bootstrap.css';在 styles.css 文件上。 （注意~)

编辑：它是如何工作的 - '~' 是 webpack 配置上设置的别名，指向资产文件夹......就这么简单......

编辑 2：如何使用“~”别名配置 webpack 的示例... 这应该放在 webpack 配置文件中（通常webpack.config.js)...

// look for the "resolve" property and add the following...
// you might need to require the asset like '~/bootsrap/...'
resolve: {
  alias: {
    '~': path.resolve('./node_modules')
  }
}