如何从webpack angular2应用程序中的node_modules导入CSS [英] How to import CSS from node_modules in webpack angular2 app

问题描述

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

Let's say that we start with the following starter pack: https://github.com/angularclass/angular2-webpack-starter

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

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

I want to add an external css module, for example bootstrap 4's css (and only the css). (I know that bootstrap has a bootstrap-loader, but now I'm asking for general solution, so please think about bootstrap 4 here as it could be any other css module that is available via npm).

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

I install bootstrap via npm: npm install bootstrap@4.0.0-alpha.4 --save

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

First I thought that it is enough to add import 'bootstrap/dist/css/bootstrap.css'; to the vendor.browser.ts file.

但不是.

我应该怎么做才能找到适当的解决方案?

What should I do to have a proper solution?

我不要求的解决方案:

1. 将外部css模块复制到资产文件夹，然后从那里使用它"
   • 我正在寻找与npm软件包一起使用的解决方案.

1. "Copy the external css module to the assets folder, and use it from there"
   • I'm looking for a solution that works together with npm package.

• 如上所述，我正在寻找一个通用的解决方案，引导程序只是这里的一个例子.

• 我正在寻找我上面提到的确切的入门包中的解决方案.

推荐答案

如果不进行一些更改，您将无法使用该堆栈将任何CSS导入到您的供应商文件.

You won't be able to import any css to your vendors file using that stack, without making some changes.

为什么?好吧，因为这一行:

Why? Well because this line:

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

这只是将css导入为字符串，而实际上您想要的是样式标签中的供应商css.如果选中config/webpack.commons.js，则会发现以下规则:

It's only importing your css as string, when in reality what you want is your vendor css in a style tag. If you check config/webpack.commons.js you will find this rule:

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

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

This rule allows your components to import the css files, basically this:

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

在AppComponent中没有封装，因为这行encapsulation: ViewEncapsulation.None,表示所有css规则都将全局应用于您的应用.因此，您可以在应用程序组件中导入引导样式:

In the AppComponent there's no encapsulation, because of this line encapsulation: ViewEncapsulation.None, which means any css rules will be applied globally to your app. So you can import the bootstrap styles in your app component:

@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上创建特定规则，并更改现有规则:

But if you insist in importing to your vendor.ts then you will need to install a new loader, npm i style-loader --save-dev this will allow webpack to inject css to your page. Then you need to create a specific rule, on your webpack.common.js and change the existing one:

 { //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
 },

仅当您尝试从node_modules内部的任何包导入css时，才会应用firs规则，第二条规则将应用于您从node_modules

The firs rule will be only applied when you try to import css, from any package inside node_modules the second rule will be applied to any css that you import from outside the node_modules

这篇关于如何从webpack angular2应用程序中的node_modules导入CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！