How to import CSS from node_modules in webpack angular2 app

Question

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

After npm install and npm run start

Answer 1

It is possible by using @import '~bootstrap/dist/css/bootstrap.css'; on the styles.css file. (Note the ~)

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

Edit 2: Example on how to configure webpack with the '~' alias... this should go on the webpack config file (usually 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')
  }
}