如何导入从node_modules CSS中的WebPack angular2应用

问题描述 投票:51回答:3

比方说,我们先从以下入门包:https://github.com/angularclass/angular2-webpack-starter

npm installnpm run start一切工作正常。

我想添加一个外部CSS模块,例如引导4个的CSS(也是唯一的CSS)。 (我知道,引导具有引导加载程序,但我现在要求一般的解决方案,所以请你们想一想引导4在这里,因为它可能是任何其他的CSS模块通过NPM可用)。

我安装引导通过NPM:npm install [email protected] --save

首先,我认为这是足以import 'bootstrap/dist/css/bootstrap.css';添加到vendor.browser.ts文件。

但事实并非如此。

我应该怎么做才能有一个妥善的解决办法?

解决方案我不要求为:

  1. “外部CSS模块复制到文件夹的资产,并从那里使用。” 我在寻找与NPM包一起工作的解决方案。
  2. “使用引导加载器的的WebPack” 正如我上面所描述的,我正在寻找一个通用的解决方案,引导这里只是一个例子。
  3. “使用另一个栈” 我正在寻找在我上面提到的确切入门包的解决方案。
css angular typescript npm webpack
3个回答
66
投票

您将无法导入任何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
 },

杉杉规则将仅应用于当你试图导入CSS,从任何包装内node_modules第二条规则将适用于您从node_modules外部引进任何CSS


82
投票

它通过使用@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')
  }
}

5
投票

因此,这里是用我觉得这是最方便的CSS导入各种angular-cli文件的方式。

基本上,你可以参考CSS文件(顺序很重要,如果你将重写它们)在配置和angular-cli将完成剩余的工作。例如,您可能要包括一对夫妇的从节点模块,它可以如下方式进行:

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

样本全配置可能是这样的:

.angular-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": {}
  }
}
© www.soinside.com 2019 - 2024. All rights reserved.