{"action":"created","issue":{"url":"https://api.github.com/repos/AngularClass/angular2-webpack-starter/issues/1110","repository_url":"https://api.github.com/repos/AngularClass/angular2-webpack-starter","labels_url":"https://api.github.com/repos/AngularClass/angular2-webpack-starter/issues/1110/labels{/name}","comments_url":"https://api.github.com/repos/AngularClass/angular2-webpack-starter/issues/1110/comments","events_url":"https://api.github.com/repos/AngularClass/angular2-webpack-starter/issues/1110/events","html_url":"https://github.com/AngularClass/angular2-webpack-starter/issues/1110","id":183496348,"number":1110,"title":"(bug): Can't use sass/scss in the latest version","user":{"login":"rafaelss95","id":11965907,"avatar_url":"https://avatars.githubusercontent.com/u/11965907?v=3","gravatar_id":"","url":"https://api.github.com/users/rafaelss95","html_url":"https://github.com/rafaelss95","followers_url":"https://api.github.com/users/rafaelss95/followers","following_url":"https://api.github.com/users/rafaelss95/following{/other_user}","gists_url":"https://api.github.com/users/rafaelss95/gists{/gist_id}","starred_url":"https://api.github.com/users/rafaelss95/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rafaelss95/subscriptions","organizations_url":"https://api.github.com/users/rafaelss95/orgs","repos_url":"https://api.github.com/users/rafaelss95/repos","events_url":"https://api.github.com/users/rafaelss95/events{/privacy}","received_events_url":"https://api.github.com/users/rafaelss95/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-10-17T18:50:49Z","updated_at":"2016-10-24T09:53:39Z","closed_at":null,"body":"* **I'm submitting a ...**\r\n[X] bug report\r\n[ ] feature request\r\n[ ] question about the decisions made in the repository\r\n\r\n* **Do you want to request a *feature* or report a *bug*?**\r\nBug.\r\n\r\n\r\n* **What is the current behavior?**\r\nI cloned this project and it works. So I searched a way to use  `scss` instead of `css`, then I followed  this [tutorial](https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-include-SCSS-in-components) and modify the extension to `scss` and, of course, in styleUrls. however I'm still receiving a bug:\r\n\r\n> ERROR in ./src/app/app.component.scss\r\n> Module build failed: \r\n> html {\r\n> ^\r\n>       Invalid CSS after \"... Get the styles\": expected 1 selector or at-rule, was \"var styles = requir\"\r\n>       in /home/rafael/work/angular/angular2-webpack-starter/src/app/app.component.scss (line 1, column 1)\r\n>  @ ./src/app/app.component.ts 26:16-47\r\n>  @ ./src/app/app.module.ts\r\n>  @ ./src/app/index.ts\r\n>  @ ./src/main.browser.ts\r\n>  @ multi main\r\n> \r\n\r\nMy `webpack.common.js` is configured as follows:\r\n\r\n```\r\nmodule: {\r\n\r\n  rules: [\r\n\r\n    /*\r\n     * Typescript loader support for .ts and Angular 2 async routes via .async.ts\r\n     * Replace templateUrl and stylesUrl with require()\r\n     *\r\n     * See: https://github.com/s-panferov/awesome-typescript-loader\r\n     * See: https://github.com/TheLarkInn/angular2-template-loader\r\n     */\r\n    {\r\n      test: /\\.ts$/,\r\n      loaders: [\r\n        '@angularclass/hmr-loader?pretty=' + !isProd + '&prod=' + isProd,\r\n        'awesome-typescript-loader',\r\n        'angular2-template-loader'\r\n      ],\r\n      exclude: [/\\.(spec|e2e)\\.ts$/]\r\n    },\r\n\r\n    /*\r\n     * Json loader support for *.json files.\r\n     *\r\n     * See: https://github.com/webpack/json-loader\r\n     */\r\n    {\r\n      test: /\\.json$/,\r\n      loader: 'json-loader'\r\n    },\r\n\r\n    /*\r\n     * to string and css loader support for *.css files\r\n     * Returns file content as string\r\n     *\r\n     */\r\n    {\r\n      test: /\\.css$/,\r\n      loaders: ['to-string-loader', 'css-loader']\r\n    },\r\n\r\n    /* Raw loader support for *.html\r\n     * Returns file content as string\r\n     *\r\n     * See: https://github.com/webpack/raw-loader\r\n     */\r\n    {\r\n      test: /\\.html$/,\r\n      loader: 'raw-loader',\r\n      exclude: [helpers.root('src/index.html')]\r\n    },\r\n\r\n    /* File loader for supporting images, for example, in CSS files.\r\n     */\r\n    {\r\n      test: /\\.(jpg|png|gif)$/,\r\n      loader: 'file'\r\n    },\r\n\r\n    // Sass\r\n    {\r\n      test: /\\.scss$/,\r\n      exclude: /node_modules/,\r\n      loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader\r\n    },\r\n\r\n    // ng2Bootstrap + Bootstrap 3\r\n\r\n    {\r\n      test: /\\.(sass|scss)$/,\r\n      loaders: ['css-to-string-loader', 'css-loader?sourceMap', 'resolve-url', 'sass-loader?sourceMap']\r\n    },\r\n\r\n    {\r\n      test: /\\.woff(2)?(\\?v=.+)?$/,\r\n      loader: \"url?limit=10000&minetype=application/font-woff\"\r\n    },\r\n\r\n    {\r\n      test: /\\.(ttf|eot|svg|woff)(\\?v=.+)?$/,\r\n      loader: \"file\"\r\n    }\r\n  ]\r\n},\r\n```\r\n\r\n* **Other information** (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)\r\n\r\nI did the same thing in the previous version and it works very well, the problem just happens in the **latest** version of this webpack.\r\n"},"comment":{"url":"https://api.github.com/repos/AngularClass/angular2-webpack-starter/issues/comments/255697308","html_url":"https://github.com/AngularClass/angular2-webpack-starter/issues/1110#issuecomment-255697308","issue_url":"https://api.github.com/repos/AngularClass/angular2-webpack-starter/issues/1110","id":255697308,"user":{"login":"d3viant0ne","id":8420490,"avatar_url":"https://avatars.githubusercontent.com/u/8420490?v=3","gravatar_id":"","url":"https://api.github.com/users/d3viant0ne","html_url":"https://github.com/d3viant0ne","followers_url":"https://api.github.com/users/d3viant0ne/followers","following_url":"https://api.github.com/users/d3viant0ne/following{/other_user}","gists_url":"https://api.github.com/users/d3viant0ne/gists{/gist_id}","starred_url":"https://api.github.com/users/d3viant0ne/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/d3viant0ne/subscriptions","organizations_url":"https://api.github.com/users/d3viant0ne/orgs","repos_url":"https://api.github.com/users/d3viant0ne/repos","events_url":"https://api.github.com/users/d3viant0ne/events{/privacy}","received_events_url":"https://api.github.com/users/d3viant0ne/received_events","type":"User","site_admin":false},"created_at":"2016-10-24T09:53:39Z","updated_at":"2016-10-24T09:53:39Z","body":"```\r\n        {\r\n          test: /\\.scss$/,\r\n          loaders: ['raw-loader', 'sass-loader']\r\n        },\r\n\r\n        {\r\n          test: /init\\.scss$/,\r\n          loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader!sass-loader?sourceMap' })\r\n        },\r\n```"}}
{"actor":{"display_login":"d3viant0ne"}}