Integrate materialize in a Angular2 project with webpack and SCSS

Question

As explain in the title I'm trying to integrate Materialize in my Angular 2 project.

The project was generated with "AngularCli"

and Im using "Webpack" and "Scss"

The tuto I found are all differents I don't understand how to do it for a scss use :

My angular-cli json :

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "accident-chain-web-angular",
    "ejected": true
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "assets/scss/main.scss"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "preprod": "environments/environment.preprod.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "component": {
    }
  }
}

My project with materialize files added in assets :

Vamshi Vamshi · Accepted Answer · 2017-06-21T03:48:44

There are many ways to use MaterializeCSS framework.

Few things to keep in mind before going to installation

It is not a CSS only framwork, though it has CSS name in it. We can use its SCSS too
It is not built for Angular
It is a component framework too built on jquery. Though we are not supposed to use jquery ( not suggested ) in angular, still we import .

You can use any of the following methods:

CDN
Assets
Include in Angular (NPM)

Each has its own advantages and disadvantages.

CDN

Just add this to index.html and you are good to go .

 <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">

 <!-- We need jquery first -->  
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

 <!-- Compiled and minified JavaScript -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>

Assets

Add it as an asset in your project. This helps in not depending on internet when building and running locally.

Download jQuery

Download CSS version

Extract them
Copy materialize.min.css, jquery-3.2.1.min.js and materialize.min.js in your assets folder

add them to index.html

<link rel="stylesheet" href="./assets/materialize.min.css" >
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="./assets/materialize.min.js"></script>

Include in angular ( NPM)

In this method we directly include the files to our angular build. I am assuming the angular project is built with @angular/cli for simplicity.

Do

npm install materialize-css --save 
npm install jquery --save
npm install url-loader --save

Add the following to .angular-cli.json:

"styles": [
   "styles.scss"
]

"scripts":[
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/materialize-css/dist/js/materialize.js"
]

Inside styles.scss , add this :

$roboto-font-path: "~materialize-css/dist/fonts/roboto/";
@import "~materialize-css/sass/materialize";

Integration with Angular:

The above all installation methods provide full functionality with materialize and no need to further install anything to work in angular. Take any example and just use the appropriate HTML structure inside the HTML part of angular components and you are good to go.

In some instances you might need to tinker with javascript and for that we need to use jQuery. Instead of that we can use the angular wrapper developer at angular2-materialize. I developed a full functional site using angular and materialize and never felt a need for that.

If you still believe you need it . You can install as follows :

Install materialize with any of the above mentioned ways

Install angular2-materialize

npm install angular2-materilize --save

Add in angular app.module.ts

import { MaterializeModule } from "angular2-materialize";

@NgModule({
  imports: [
    //...
    MaterializeModule,
  ],
  //...
})

Follow other examples provided in the home page of angular2-materialize

Integrate materialize in a Angular2 project with webpack and SCSS

2 Answers

CDN

Assets

Include in angular ( NPM)

Integration with Angular: