Integration materializes in an Angular2 project using webpack and SCSS

Question

As explained in the title, I am trying to integrate Materialize into my Angular 2 project.

The project was created using < AngularCli "

and Im using " Webpack " and " Scss "

The one I found is all different. I do not understand how to do this to use scss :

- materialize the tuto website

- 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 tangible files added to assets:

Answer 1

There are many ways to use the MaterializeCSS environment.

A few things to keep in mind before proceeding with the installation.

• This is not a CSS framework, although it does have a CSS name. We can also use it SCSS
• It is not built for Angular
• This is a component structure too built into jquery. Although we should not use jquery (not recommended) in angular, we still 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're 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 to your project. This helps the Internet-independent when creating and working locally.

Download jQuery

Download CSS Version

• Take them out
• Copy materialize.min.css , jquery-3.2.1.min.js and materialize.min.js to your resources 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 files in our Angular construct. I assume 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 .angular-cli.json 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 the following:

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

---

Integration with Angular:

All the installation methods described above provide full functionality with materialization and do not require further installation of any work to work in Angular . Take any example and just use the appropriate HTML structure inside the HTML part of Angular components, and you're good to go.

In some cases, you may need to use javascript, and for this we need to use jQuery. Instead, we can use the Angular shell developer in angular2-materialize . I developed a full functional site using Angular, and I materialize and never felt the need for it.

If you still think you need it. You can set the following:

• Install materialization using any of the following methods.

• Install angular2 -materialize

   npm install angular2-materilize --save 

  Add to Angular app.module.ts

   import { MaterializeModule } from "angular2-materialize"; @NgModule({ imports: [ //... MaterializeModule, ], //... }) 

Follow the other examples on the angular2-materialize homepage

Answer 2

If you use the Angular CLI (I assume you wanted to say that it uses Webpack and SCSS), why not move the scss directory from the src/assets/ directory and put it in just the src/ folder, so your location is src/scss/ . Assets are usually uncompiled / processed resources for your applications, and not a suitable place for your SCSS.

Then you can change

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

to

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

And when you run cli (either ng serve or ng build , your SCSS should be created and maintained by your application.

I assume that you are importing other SCSS files into the scss/ directory in main.scss . Otherwise, you can add them to the styles array in angular-cli.json