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

假设我们从以下开始: Https://github.com/angularclass/angular2-webpack-starter

在 npm install和 npm run start之后，一切正常。

我想添加一个外部 css 模块，例如 bootstrap 4的 css (只有 css)。(我知道 bootstrap 有一个 bootstrap-loader，但是现在我要求一个通用的解决方案，所以请考虑 bootstrap 4，因为它可能是任何其他可以通过 npm 获得的 css 模块)。

我通过 npm: npm install bootstrap@4.0.0-alpha.4 --save安装引导程序

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

但事实并非如此。

我该怎么做才能找到一个合适的解决方案？

我没有要求的解决方案:

  1. “将外部 css 模块复制到资产文件夹，并从该文件夹使用它”
    • 我正在寻找一个解决方案，与 npm 包一起工作。
  2. “对 webpack 使用 bootstrap-loader”
    • 正如我上面所描述的，我正在寻找一个通用的解决方案，bootstrap 只是这里的一个例子。
  3. “用另一堆”
    • 我正在寻找一个解决方案，在确切的启动包，我已经提到了上述。
104019 次浏览
小开
最佳答案

如果不做一些更改，您将无法使用该堆栈将任何 css 导入到 供应商文件中。

为什么? 因为这句话:

import 'bootstrap/dist/css/bootstrap.css';

它只是导入你的 css 作为字符串，而实际上你想要的是你的供应商 css 在一个样式标签。如果你检查 config/webpack.commons.js，你会发现这条规则:

 {
test: /\.css$/,
loaders: ['to-string-loader', 'css-loader']
},

这个规则允许组件导入 css 文件，基本上是这样的:

@Component({
selector: 'app',
encapsulation: ViewEncapsulation.None,
styleUrls: [
'./app.component.css' // this why you import css as string
],

在 AppComponent 中没有封装，因为这一行是 encapsulation: ViewEncapsulation.None,，这意味着任何 css 规则都将全局应用到您的应用程序中。所以你可以在你的应用组件中导入引导样式:

@Component({
selector: 'app',
encapsulation: ViewEncapsulation.None,
styleUrls: [
'./app.component.css',
'../../node_modules/bootstrap/dist/css/bootstrap.css'
],

但是如果你坚持导入到你的 vendor.ts然后你将需要安装一个新的加载程序，npm i style-loader --save-dev这将允许 webpack 注入 css 到你的页面。然后，您需要在 webpack.common.js 上创建一个特定的规则，并更改现有的规则:

 { //this rule will only be used for any vendors
test: /\.css$/,
loaders: ['style-loader', 'css-loader'],
include: [/node_modules/]
},
{
test: /\.css$/,
loaders: ['to-string-loader', 'css-loader'],
exclude: [/node_modules/] //add this line so we ignore css coming from node_modules
},

Firs 规则将只适用于当您尝试导入 css 时，从 node_modules内部的任何包中，第二个规则将适用于从 node_modules外部导入的任何 css

小开

可以在 styles.css 文件中使用 @import '~bootstrap/dist/css/bootstrap.css';(请注意 ~)

Edit: How it works - The '~' is an alias set on the webpack config pointing to the assets folder... simple as that..

编辑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')
}
}

小开

因此，这里有一种方法来导入各种 CSS文件使用的 angular-cli，我觉得最方便。

基本上，您可以在配置中引用 CSS文件(顺序很重要，如果您要重写它们的话) ，其余的由 angular-cli来处理。例如，您可能希望包含来自 node-module 的两个样式，这可以按照如下方式进行:

"styles": [
"../node_modules/font-awesome/css/font-awesome.min.css",
"../node_modules/primeng/resources/primeng.min.css",
"styles.css"
]

示例完整配置可能如下所示:

。角-cli。 json

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "my-angular-app"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"../node_modules/font-awesome/css/font-awesome.min.css",
"../node_modules/primeng/resources/primeng.min.css",
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"component": {}
}
}

提交答案