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 :

- Materialize website tuto

- Npm website

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 :

Answer 1

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

Answer 2

If you're using the Angular CLI (which I assume you meant to say that it is using Webpack and SCSS), why not move your the scss directory out of the src/assets/ directory and put it into just the src/ folder, so your location is src/scss/. Assets are typically non-compiled/processed resources for your apps, not the appropriate place for your SCSS.

Then you can change

   "styles": [
        "assets/scss/main.scss"
   ],

to

   "styles": [
        "scss/main.scss"
   ],

And when you run the cli (either ng serve or ng build your SCSS should be built and served with your app.

I am making the assumption that youre importing the other SCSS files in the scss/ directory in your main.scss. Otherwise you can add them to the styles array in the angular-cli.json