current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 1 down vote favorite

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.

share|improve this question
    
Are you using the configuration from the official 5 min quickstart? – Cosmin Ababei Apr 15 at 19:36
    
@CosminAbabei I started by cloning github.com/mgechev/angular2-seed Anything in particular you're wanting to know? – awwester Apr 15 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 Apr 15 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 Apr 15 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 Apr 15 at 21:53
up vote 1 down vote accepted

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'
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.