Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add webpack installation guide #2

Closed
xdgimf opened this issue Feb 9, 2016 · 6 comments
Closed

Add webpack installation guide #2

xdgimf opened this issue Feb 9, 2016 · 6 comments

Comments

@xdgimf
Copy link

xdgimf commented Feb 9, 2016

It would be nice if theres a guide on how to install it with webpack

@rubyboy
Copy link
Contributor

rubyboy commented Feb 9, 2016

Added to readme.
Can you confirm it works for you?

Here's my full webpack configuration:

module.exports = {
    entry: "./src/app.ts",
    output: {
        filename: "bundle.js"
    },
    devtool: 'source-map',
    resolve: {
        alias: {
          materializecss: 'materialize-css/dist/css/materialize.css',
          materialize: 'materialize-css/dist/js/materialize.js',
        },
        extensions: ['', '.webpack.js', '.web.js', '.ts', '.js', '.css']
    },
    module: {
        loaders: [
            { test: /materialize-css\/dist\/js\/materialize\.js/, loader: 'imports?materializecss' },
            { test: /\.ts$/, loader: 'ts-loader' },
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/, loader: 'url-loader?limit=100000' }
        ]
    },
    noParse: [ /.+zone\.js\/dist\/.+/, /.+angular2\/bundles\/.+/ ]
};

And this is the app.ts I used for testing:

import 'angular2/bundles/angular2-polyfills';
import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';

import "angular2-materialize";
import {MaterializeDirective} from "angular2-materialize";

@Component({
    selector: 'app',
    directives: [MaterializeDirective],
    template: `
              <a class="waves-effect waves-light btn">Stuff</a>
              <a class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>button</a>
              <a class="waves-effect waves-light btn"><i class="material-icons right">cloud</i>button</a>
              <hr/>
              <div>{{show}}</div>
              <button (click)="show=!show">toggle</button>
              <hr/>
              <div *ngIf="show">
                <ul materialize="collapsible" class="collapsible" data-collapsible="accordion">
                  <li>
                    <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
                    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
                  </li>
                  <li>
                    <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
                    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
                  </li>
                  <li>
                    <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
                    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
                  </li>
                </ul>
              <div>
              `
})
export class AppComponent {
    show = false;
}

bootstrap(AppComponent);

If you use the same code and take out the directive then the collapsible panel won't work, because it needs the angular2 bindings.

@xdgimf
Copy link
Author

xdgimf commented Feb 10, 2016

Testing it with https://github.com/AngularClass/angular2-webpack-starter

{ test: /materialize-css\/dist\/js\/materialize\.js/, loader: 'imports?materializecss' },

I think this line isn't working, css styles are not loaded properly, not sure why.

I tried adding the materialize-css on index.html and it worked. Can't seem to make it work using the loader.
https://gist.github.com/xdgimf/5f07e124d18be1ba3b7f

@rubyboy
Copy link
Contributor

rubyboy commented Feb 11, 2016

The problem is that the starter project assumes it needs to load CSS with the raw loader (to be used inside Angular's own styles handling), thus not applying styles from Materialize:

{ test: /\.css$/,   loader: 'raw-loader' },

To work around this, without changing the way CSS is handled across the app, I suggest adding the following, to match the materialize.css specifically and load it with the style loader:

      { test: /materialize\.css$/,   loader: 'style-loader!css-loader' },

Then, also update the css loader to apply only to CSS that is not "materialize":

      // Support for CSS as raw text (do not match 'materialize')
      { test: /^((?!materialize).)*\.css$/,   loader: 'raw-loader' },

Another thing to confirm is that you also handle woff's properly:

      { test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/, loader: 'url-loader?limit=100000' },

Lastly, you do need the url-loader and imports-loader modules installed in your package.json:

npm install imports-loader --save-save
npm install url-loader --save-dev

I've tested the above with the angular2-webpack-starter and it seems to work well for me. Can you confirm if that solved your issue and I'll update the readme accordingly for people who may be using this type of CSS loading mechanism (raw, instead of style).

@xdgimf
Copy link
Author

xdgimf commented Feb 11, 2016

It works for me too, thanks a lot

@danielquintero
Copy link

I can confirm this works pretty great on OS X, however while on Windows I haven't been able to make it work. @rubyboy Any idea why this would be? issue with the loader: 'style-loader!css-loader' loader perhaps?

@marcellopato
Copy link

Allways get this error: Uncaught TypeError: Cannot read property 'swing' of undefined(…)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants