How do I include css from npm in Angular2

Question

This has been surprisingly hard to find an answer to, please point out if I'm not searching right and this is a duplicate question.

I have an Angular2 (2.0.0-beta.14) app and am having issues including a 3rd party css file. I've downloaded materialize-css via npm and I can see the file is at node_modules/materialize-css/bin/materialize.css.

I would like this css file to be visible to my entire application.

At the highest level, I've tried including it in my index.html head section <link rel="stylesheet" href="./node_modules/materialize-css/bin/materialize.css" media="screen">, but can't figure out where it's being served or even if it's being served.

At a lower level, I've tried defining it in the styleUrls token of the app initiation.

@Component({
  selector: 'myApp',
  providers: [],
  pipes: [],
  directives: [ROUTER_DIRECTIVES],
  templateUrl: 'app/henna.html',
  styleUrls: ['materialize.css']
})

I've tried various different styleUrls trying to find the file, but it seems the problem might be that the file is not accessible.

Please let me know any more info that is needed to help, this is my first application that I've used Angular2.

Are you using the configuration from the official 5 min quickstart? — Cosmin Ababei
– Cosmin Ababei, Commented Apr 15, 2016 at 19:36
@CosminAbabei I started by cloning github.com/mgechev/angular2-seed Anything in particular you're wanting to know? — awwester
– awwester, Commented Apr 15, 2016 at 20:12
I was interested in knowing what kind of structure you are using. I'm not sure what's wrong since I could install materialize-css with no problems after cloning angular2-seed. Have you made any structural changes to this seed? — Cosmin Ababei
– Cosmin Ababei, Commented Apr 15, 2016 at 20:25
nothing structural, just added a few new components. After npm install materialize-css what did you do to have the css file loaded? — awwester
– awwester, Commented Apr 15, 2016 at 21:25
Just copy pasted your link tag and it worked <link rel="stylesheet" href="./node_modules/materialize-css/bin/materialize.css" media="screen">. What error are you getting? 404? — Cosmin Ababei
– Cosmin Ababei, Commented Apr 15, 2016 at 21:53

awwester · Accepted Answer · 2016-04-16 00:36:27Z

1

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'

edited Apr 16, 2016 at 0:36

answered Apr 15, 2016 at 23:46

awwester

10.2k13 gold badges48 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do I include css from npm in Angular2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related