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 · Accepted Answer · 2017-06-29 10:44:11Z

12

+150

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

edited Jun 29, 2017 at 10:44

answered Jun 21, 2017 at 3:48

Vamshi

9,3615 gold badges41 silver badges55 bronze badges

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

16 Comments

An-droid Over a year ago

I worked on that and this is not so simple. My project use cli and webpack. Let's say I downloaded the SASS version of materialize from materializecss.com/getting-started.html because I want to be able to modify scss behaviors. Then I copy/paste it in my assets folder. But I don't want jquery locally. For animations I need angular2-materialize. This is all confusing for me, everything I try gets me diferent errors, webpack/jquerry/or materialize related...

Vamshi Over a year ago

Dude, where was it mentioned to put scss file in assets. Tell what you tried and what errors you got. Are you using cli pure or cli eject ? . I gave so many options which one you tried

Vamshi Over a year ago

Even if you dont want jquery, materialize needs it so you HAVE to import it. If you dont want to do that, use either Material design lite or angular material 2 or the best 'MDC for Web'

An-droid Over a year ago

Then where should I put the files of materialize-SASS version from the link I provided (which contains sass/js/fonts files)? This is what I need. So I guess it is corresponding with the Asset part of your answer. Every tuto I watch gives different answers.. and it is not clear what to add to my webpack config/ what to add to main.html, What to had to angula-cli. The tuto from the github of angular2materialize tells to do some of each of the methods you provided here for the integration :/ For info I did not eject the project. And for Jquery I just don't want it locally.

Vamshi Over a year ago

Because there are so many ways to do it. Choose any of the three steps mentioned above and it should work. Ignore angular2-materialize get it working without that. Once we see everything is working fine , we can install that ( even though its not needed at all in reality )

|

MichaelSolati · Accepted Answer · 2017-06-20 04:33:38Z

1

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

answered Jun 20, 2017 at 4:33

MichaelSolati

2,8721 gold badge19 silver badges30 bronze badges

5 Comments

MichaelSolati Over a year ago

PS You could also always import the materialize scss directly through the cli json by passing "../node_modules/materialize-css/sass/materialize.scss" into the styles array.

An-droid Over a year ago

So doing both import the scss files into the main.scss and materialize.scss into the style array at the same time is useless ?

MichaelSolati Over a year ago

Are you asking if it's pointless to import both of those into the styles array? If the materialize.scss is already imported into the main.scss then you wouldn't need to import it again in the styles array.. (Not sure if i'm understanding you though).

An-droid Over a year ago

Yes that's what I was asking. I'm completly new to web developpement so it may seems I'm asking dumb questions x)

MichaelSolati Over a year ago

Ok, then you are correct in your assessment that importing main.scss and materialize.scss both into your styles array is useless if materialize has already been imported into main. On a separate note, did my advice work?

Collectives™ on Stack Overflow

Integrate materialize in a Angular2 project with webpack and SCSS

2 Answers 2

CDN

Assets

Include in angular ( NPM)

Integration with Angular:

16 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

CDN

Assets

Include in angular ( NPM)

Integration with Angular:

16 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related