Utilizing node_modules CSS imports in your webpack-powered Angular 2 application

Question

Utilizing node_modules CSS imports in your webpack-powered Angular 2 application

Imagine we kick things off with this nifty starter pack: https://github.com/angularclass/angular2-webpack-starter

Once we execute npm install and npm run start, everything runs smoothly.

Now, let's say I want to incorporate an external css module, like bootstrap 4's css (just the css). (I am aware of bootstrap-loader, but for now let's focus on a more general solution, using bootstrap 4 as an example).

To get bootstrap via npm:

npm install<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0e6c61617a7d7a7c6f7e4e3a203e203e236f627e666f203a">[email protected]</a> --save

Initially, I thought adding

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

to vendor.browser.ts would suffice.

However, it turned out not to be enough.

What steps should I take for a proper solution?

Here are some solutions I'm NOT interested in:

"Copy the external css module to the assets folder and use it from there"
- I'm seeking a solution that integrates seamlessly with the npm package.
"Utilize bootstrap-loader for webpack"
- As mentioned before, I am after a generic solution, where bootstrap is just being used as an example.
"Switch to a different stack"
- I am specifically looking for a solution within the exact starter pack referenced above.

css angular typescript npm webpack

Answer 1

Answer №1

To include Bootstrap in your project, use

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

in the styles.css file. Keep in mind the use of the ~.

Note: The '~' serves as an alias specified in the webpack config that points to the assets folder.

For instance, here is an example of configuring webpack with the '~' alias in the webpack configuration file (usually named webpack.config.js):

// Add this code under the "resolve" property in webpack.config.js
// You may need to require the asset like '~/bootsrap/...'
resolve: {
  alias: {
    '~': path.resolve('./node_modules')
  }
}

Answer 2

To include Bootstrap in your project, use

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

in the styles.css file. Keep in mind the use of the ~.

Note: The '~' serves as an alias specified in the webpack config that points to the assets folder.

For instance, here is an example of configuring webpack with the '~' alias in the webpack configuration file (usually named webpack.config.js):

// Add this code under the "resolve" property in webpack.config.js
// You may need to require the asset like '~/bootsrap/...'
resolve: {
  alias: {
    '~': path.resolve('./node_modules')
  }
}

Answer 3

Answer №2

To incorporate external CSS into your vendors file using that technology stack, some adjustments are necessary.

Why is this necessary? The reason lies in the following line of code:

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

This line simply imports your CSS as a string, whereas ideally, you would want your vendor CSS to be within a style tag. By examining the config/webpack.commons.js file, you will encounter this specific rule:

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

Through this rule, your components gain the ability to import CSS files. Essentially, it operates as follows:

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

The absence of encapsulation in the AppComponent due to the line

encapsulation: ViewEncapsulation.None,

signifies that any CSS rules will have a global application within your app. Consequently, you can bring in Bootstrap styles within your app component:

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

If you persist in importing CSS into your vendor.ts, then the inclusion of a new loader is mandatory. Execute npm i style-loader --save-dev to enable webpack to inject CSS onto your page. Subsequently, crafting a specific rule within your webpack.common.js and modifying the existing one becomes imperative:

 { //this rule will solely cater to vendors
   test: /\.css$/,
   loaders: ['style-loader', 'css-loader'],
   include: [/node_modules/]
 },
 {
   test: /\.css$/,
   loaders: ['to-string-loader', 'css-loader'],
   exclude: [/node_modules/] //incorporate this aspect to bypass CSS originating from node_modules
 },

The initial rule exclusively pertains to situations where CSS is imported from any package residing inside node_modules. Conversely, the second rule applies to any externally sourced CSS not originating from node_modules.

Answer 4

To incorporate external CSS into your vendors file using that technology stack, some adjustments are necessary.

Why is this necessary? The reason lies in the following line of code:

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

This line simply imports your CSS as a string, whereas ideally, you would want your vendor CSS to be within a style tag. By examining the config/webpack.commons.js file, you will encounter this specific rule:

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

Through this rule, your components gain the ability to import CSS files. Essentially, it operates as follows:

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

The absence of encapsulation in the AppComponent due to the line

encapsulation: ViewEncapsulation.None,

signifies that any CSS rules will have a global application within your app. Consequently, you can bring in Bootstrap styles within your app component:

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

If you persist in importing CSS into your vendor.ts, then the inclusion of a new loader is mandatory. Execute npm i style-loader --save-dev to enable webpack to inject CSS onto your page. Subsequently, crafting a specific rule within your webpack.common.js and modifying the existing one becomes imperative:

 { //this rule will solely cater to vendors
   test: /\.css$/,
   loaders: ['style-loader', 'css-loader'],
   include: [/node_modules/]
 },
 {
   test: /\.css$/,
   loaders: ['to-string-loader', 'css-loader'],
   exclude: [/node_modules/] //incorporate this aspect to bypass CSS originating from node_modules
 },

The initial rule exclusively pertains to situations where CSS is imported from any package residing inside node_modules. Conversely, the second rule applies to any externally sourced CSS not originating from node_modules.

Answer 5

Answer №3

If you're looking to import multiple CSS files using angular-cli, here's a handy method that I personally find very convenient.

Simply list the CSS files in the configuration file (make sure to order them correctly if there are overrides) and let angular-cli handle the rest. For example, if you need to include styles from node-modules, you can do so like this:

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

Your complete configuration file might resemble something like this:

.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": {}
  }
}

Answer 6

If you're looking to import multiple CSS files using angular-cli, here's a handy method that I personally find very convenient.

Simply list the CSS files in the configuration file (make sure to order them correctly if there are overrides) and let angular-cli handle the rest. For example, if you need to include styles from node-modules, you can do so like this:

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

Your complete configuration file might resemble something like this:

.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": {}
  }
}

Utilizing node_modules CSS imports in your webpack-powered Angular 2 application

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to extract value from subscribing?

Creating a user-friendly login feature within the navigation bar of an HTML webpage

Tips for troubleshooting the 404 error on nginx servers

When running the command "npm start," an error occurs stating: Plugin/Preset files are prohibited from exporting objects and can only export functions

Text loaded dynamically is not remaining within the div

Adjust the size of divs using JQuery UI's draggable feature

Is it possible to create a sticky element that stays fixed to the window without using JavaScript?

What causes child margins to extend beyond the boundaries of div elements?

JavaScript has encountered a syntax error

Is it considered poor form to develop an npm module that relies on an external application or program for its functionality

Monitoring changes to variables in Angular 5

Is it possible to use CSS alone to showcase information above labels via radio tabs?

Utilization of z-index with float: left within an image gallery in CSS

TS2339: The specified property 'defaultProps' is missing from the type '(props: any) => DetailedReactHTMLElement<{ className: string; }, HTMLElement>'

How to reach the Twitter share iframe with JavaScript/HTML

Is there a way to monitor HTTP requests from an Angular application within Chrome?

Simulating the behavior of display blocks

Button addition in Angular is malfunctioning

What steps can I take to resolve the issue with the cdk module?

Leveraging User Location in Angular 6 using API with OpenLayers