{"action":"created","issue":{"url":"https://api.github.com/repos/aspnet/JavaScriptServices/issues/394","repository_url":"https://api.github.com/repos/aspnet/JavaScriptServices","labels_url":"https://api.github.com/repos/aspnet/JavaScriptServices/issues/394/labels{/name}","comments_url":"https://api.github.com/repos/aspnet/JavaScriptServices/issues/394/comments","events_url":"https://api.github.com/repos/aspnet/JavaScriptServices/issues/394/events","html_url":"https://github.com/aspnet/JavaScriptServices/issues/394","id":184299803,"number":394,"title":"Materialize? ","user":{"login":"AndrewKralovec","id":6210337,"avatar_url":"https://avatars.githubusercontent.com/u/6210337?v=3","gravatar_id":"","url":"https://api.github.com/users/AndrewKralovec","html_url":"https://github.com/AndrewKralovec","followers_url":"https://api.github.com/users/AndrewKralovec/followers","following_url":"https://api.github.com/users/AndrewKralovec/following{/other_user}","gists_url":"https://api.github.com/users/AndrewKralovec/gists{/gist_id}","starred_url":"https://api.github.com/users/AndrewKralovec/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/AndrewKralovec/subscriptions","organizations_url":"https://api.github.com/users/AndrewKralovec/orgs","repos_url":"https://api.github.com/users/AndrewKralovec/repos","events_url":"https://api.github.com/users/AndrewKralovec/events{/privacy}","received_events_url":"https://api.github.com/users/AndrewKralovec/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2016-10-20T18:04:02Z","updated_at":"2016-10-20T18:34:52Z","closed_at":null,"body":"Does anyone know how to add materialize css to this project ? I tried to implement it myself but i cant get materialize to work. Maybe someone who has or knows how to can help me out. \r\n\r\nWhat i have currently have \r\n## package.json \r\n```\r\n{\r\n  \"name\": \"Test\",\r\n  \"version\": \"0.0.0\",\r\n  \"devDependencies\": {\r\n    \"aspnet-webpack\": \"^1.0.6\",\r\n    \"bootstrap\": \"^3.3.6\",\r\n    \"css-loader\": \"^0.23.1\",\r\n    \"expose-loader\": \"^0.7.1\",\r\n    \"extendify\": \"^1.0.0\",\r\n    \"extract-text-webpack-plugin\": \"^1.0.1\",\r\n    \"file-loader\": \"^0.8.5\",\r\n    \"jquery\": \"^2.2.1\",\r\n    \"raw-loader\": \"^0.5.1\",\r\n    \"style-loader\": \"^0.13.0\",\r\n    \"ts-loader\": \"^0.8.1\",\r\n    \"typescript\": \"^1.8.2\",\r\n    \"url-loader\": \"^0.5.7\",\r\n    \"webpack\": \"^1.12.14\",\r\n    \"webpack-hot-middleware\": \"^2.10.0\"\r\n  },\r\n  \"dependencies\": {\r\n    \"@angular/common\": \"2.0.0-rc.4\",\r\n    \"@angular/compiler\": \"2.0.0-rc.4\",\r\n    \"@angular/core\": \"2.0.0-rc.4\",\r\n    \"@angular/http\": \"2.0.0-rc.4\",\r\n    \"@angular/platform-browser\": \"2.0.0-rc.4\",\r\n    \"@angular/platform-browser-dynamic\": \"2.0.0-rc.4\",\r\n    \"@angular/platform-server\": \"2.0.0-rc.4\",\r\n    \"@angular/router\": \"3.0.0-beta.2\",\r\n    \"angular2-materialize\": \"^3.0.3\",\r\n    \"angular2-universal\": \"^0.104.5\",\r\n    \"aspnet-prerendering\": \"^1.0.2\",\r\n    \"css\": \"^2.2.1\",\r\n    \"es6-shim\": \"^0.35.1\",\r\n    \"isomorphic-fetch\": \"^2.2.1\",\r\n    \"materialize-css\": \"^0.97.7\",\r\n    \"materialize-tags\": \"^1.0.0\",\r\n    \"preboot\": \"^2.0.10\",\r\n    \"rxjs\": \"5.0.0-beta.6\",\r\n    \"webpack-externals-plugin\": \"^1.0.0\",\r\n    \"zone.js\": \"^0.6.12\"\r\n  }\r\n}\r\n```\r\n\r\n## webpack.config.js\r\n```\r\nvar path = require('path');\r\nvar webpack = require('webpack');\r\nvar merge = require('extendify')({ isDeep: true, arrays: 'concat' });\r\nvar ExtractTextPlugin = require('extract-text-webpack-plugin');\r\nvar extractCSS = new ExtractTextPlugin('styles.css');\r\nvar devConfig = require('./webpack.config.dev');\r\nvar prodConfig = require('./webpack.config.prod');\r\nvar isDevelopment = process.env.ASPNETCORE_ENVIRONMENT === 'Development';\r\n\r\nmodule.exports = merge({\r\n    resolve: {\r\n        extensions: [ '', '.js', '.ts' ],\r\n        alias: {\r\n            materializecss: 'materialize-css/dist/css/materialize.css',\r\n            materialize: 'materialize-css/dist/js/materialize.js',\r\n        }\r\n    },\r\n    module: {\r\n        loaders: [\r\n            { test: /\\.ts$/, include: /ClientApp/, loader: 'ts-loader?silent=true' },\r\n            { test: /\\.html$/, loader: 'raw-loader' },\r\n            { test: /\\.css/, loader: extractCSS.extract(['css']) },\r\n            { test: /materialize-css\\/dist\\/js\\/materialize\\.js/, loader: 'imports?materializecss' }\r\n        ]\r\n    },\r\n    entry: {\r\n        main: ['./ClientApp/boot-client.ts']\r\n    },\r\n    output: {\r\n        path: path.join(__dirname, 'wwwroot', 'dist'),\r\n        filename: '[name].js',\r\n        publicPath: '/dist/'\r\n    },\r\n    plugins: [\r\n        extractCSS,\r\n        new webpack.DllReferencePlugin({\r\n            context: __dirname,\r\n            manifest: require('./wwwroot/dist/vendor-manifest.json')\r\n        })\r\n    ]\r\n}, isDevelopment ? devConfig : prodConfig);\r\n```\r\n\r\n## webpack.config.vendor.js\r\n```\r\n\r\nvar path = require('path');\r\nvar webpack = require('webpack');\r\nvar ExtractTextPlugin = require('extract-text-webpack-plugin');\r\nvar extractCSS = new ExtractTextPlugin('vendor.css');\r\nvar isDevelopment = process.env.ASPNETCORE_ENVIRONMENT === 'Development';\r\n\r\nmodule.exports = {\r\n    resolve: {\r\n        extensions: [ '', '.js' ]\r\n    },\r\n    module: {\r\n        loaders: [\r\n            { test: /\\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },\r\n            { test: /\\.css/, loader: extractCSS.extract(['css']) }\r\n        ]\r\n    },\r\n    entry: {\r\n        vendor: [\r\n            'bootstrap',\r\n            'bootstrap/dist/css/bootstrap.css',\r\n            'materialize-css',\r\n            'es6-shim',\r\n            'style-loader',\r\n            'jquery',\r\n            '@angular/common',\r\n            '@angular/compiler',\r\n            '@angular/core',\r\n            '@angular/http',\r\n            '@angular/platform-browser',\r\n            '@angular/platform-browser-dynamic',\r\n            '@angular/router',\r\n            '@angular/platform-server',\r\n        ]\r\n    },\r\n    output: {\r\n        path: path.join(__dirname, 'wwwroot', 'dist'),\r\n        filename: '[name].js',\r\n        library: '[name]_[hash]',\r\n    },\r\n    plugins: [\r\n        extractCSS,\r\n        new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)\r\n        new webpack.optimize.OccurenceOrderPlugin(),\r\n        new webpack.DllPlugin({\r\n            path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),\r\n            name: '[name]_[hash]'\r\n        })\r\n    ].concat(isDevelopment ? [] : [\r\n        new webpack.optimize.UglifyJsPlugin({\r\n            compress: { warnings: false },\r\n            minimize: true,\r\n            mangle: false // Due to https://github.com/angular/angular/issues/6678\r\n        })\r\n    ])\r\n};\r\n\r\n```\r\n"},"comment":{"url":"https://api.github.com/repos/aspnet/JavaScriptServices/issues/comments/255190385","html_url":"https://github.com/aspnet/JavaScriptServices/issues/394#issuecomment-255190385","issue_url":"https://api.github.com/repos/aspnet/JavaScriptServices/issues/394","id":255190385,"user":{"login":"MarkPieszak","id":2574412,"avatar_url":"https://avatars.githubusercontent.com/u/2574412?v=3","gravatar_id":"","url":"https://api.github.com/users/MarkPieszak","html_url":"https://github.com/MarkPieszak","followers_url":"https://api.github.com/users/MarkPieszak/followers","following_url":"https://api.github.com/users/MarkPieszak/following{/other_user}","gists_url":"https://api.github.com/users/MarkPieszak/gists{/gist_id}","starred_url":"https://api.github.com/users/MarkPieszak/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/MarkPieszak/subscriptions","organizations_url":"https://api.github.com/users/MarkPieszak/orgs","repos_url":"https://api.github.com/users/MarkPieszak/repos","events_url":"https://api.github.com/users/MarkPieszak/events{/privacy}","received_events_url":"https://api.github.com/users/MarkPieszak/received_events","type":"User","site_admin":false},"created_at":"2016-10-20T18:34:52Z","updated_at":"2016-10-20T18:34:52Z","body":"Just as a note, server-side rendering will not work with Materialize (because it's useage of document/window & jQuery) [https://github.com/InfomediaLtd/angular2-materialize/issues/140]"}}
{"actor":{"display_login":"MarkPieszak"}}