How to enable css from npm in Angular2

Question

It is surprisingly hard to find the answer, please indicate if I was looking for rights, and this is a duplicate question.

I have an Angular2 application (2.0.0-beta.14) and I have problems, including a third-party css file. I downloaded materialize-css via npm and I see that the file is in node_modules/materialize-css/bin/materialize.css .

I want this css file to be visible to my entire application.

At the highest level, I tried to include it in the index.html head <link rel="stylesheet" href="./node_modules/materialize-css/bin/materialize.css" media="screen"> section, but I can’t understand where it is being served or even if it is being served.

At a lower level, I tried to define it in the application styleUrls token.

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

I tried different styles of styles trying to find the file, but it seems that the problem is that the file is not available.

Please let me know more information that is needed to help, this is my first application that I used Angular2.

Answer 1

This was a problem because the web package did not associate my files with what I expected (I had not used the web package before). I needed to install the correct webpack loaders for css and font files, import materializable files, and then the files were included.

After installing the correct bootloaders ( npm install css-loader npm install file-loader ) in webpack.config.js I needed to change 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 vendor.js file I needed to import manizeize js and css

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