How to Import CSS from Node_Modules in Webpack Angular2 App

How to import CSS from node_modules in webpack angular2 app

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';

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']
 },

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
  ],

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'
  ],

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

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

Angular2: How to import a stylesheet from node_modules?

Because you're already using SCSS, in your ./site_table.scss import it like so

@import "~swimlane/ngx-datatable/release/index";

Note: do not add the extension.

It will import stylesheet from node package. That served my well, hope it will do for you too. That way you just have to use single stylesheet in your component and it will look cleaner.

Angular 6 import SCSS from node_modules with assets

/src/assets/fonts/bold/xyz.eot (building the project works, but path
is wrong on runtime)

When your app builds default all files will be in your dist folder.
It will look something like this

• assets
• index.html
• bunch of js files and other

You won't have an src folder on root.

Absolute path would be /assets/fonts/bold/xyz.eot

I think relative path would be ./nodemodules/library/fonts/bold/xyz.eot

How to use CSS when installed from npm in Angular2

It's better you include in your main module file like in app.ts file:

// Just make sure you use the relative path here
import '../../node_modules/bootstrap-material-design/dist/css/bootstrap-material-design.css'
import '../../node_modules/bootstrap-material-design/dist/css/ripples.min.css'

// your component (example code below)

@Component({
    selector: 'app',
    templateUrl: 'app.template.html'
})

And that's it. Webpack will take care of the reset.

Edit:

If you have created the app using angular-cli/ng-cli then you can also include these stylesheets to angular-cli.json

How do I include css from npm in Angular2

This was an issue with webpack not bundling my files how I was expecting (I had never used webpack before). I needed to install the correct webpack loaders for css and font files, import materialize, and then the files were being included.

After installing the correct loaders (npm install css-loader npm install file-loader), in webpack.config.js I needed to modify the module object.

module: {
    loaders: [
      { test: /\.ts$/, loader: 'awesome-typescript-loader' },
      { test: /\.css$/, loader: "style-loader!css-loader" },
      { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, loader : 'file-loader'},
    ]
  }

in the vendor.js file, I needed to import the materialize js and css

import 'materialize-css/bin/materialize.css'
import 'materialize-css/bin/materialize.js'

---

Related Topics