{"action":"created","issue":{"url":"https://api.github.com/repos/sapegin/react-styleguidist/issues/110","repository_url":"https://api.github.com/repos/sapegin/react-styleguidist","labels_url":"https://api.github.com/repos/sapegin/react-styleguidist/issues/110/labels{/name}","comments_url":"https://api.github.com/repos/sapegin/react-styleguidist/issues/110/comments","events_url":"https://api.github.com/repos/sapegin/react-styleguidist/issues/110/events","html_url":"https://github.com/sapegin/react-styleguidist/issues/110","id":144363116,"number":110,"title":"SCSS webpack loader example","user":{"login":"talexand","id":5308179,"avatar_url":"https://avatars.githubusercontent.com/u/5308179?v=3","gravatar_id":"","url":"https://api.github.com/users/talexand","html_url":"https://github.com/talexand","followers_url":"https://api.github.com/users/talexand/followers","following_url":"https://api.github.com/users/talexand/following{/other_user}","gists_url":"https://api.github.com/users/talexand/gists{/gist_id}","starred_url":"https://api.github.com/users/talexand/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/talexand/subscriptions","organizations_url":"https://api.github.com/users/talexand/orgs","repos_url":"https://api.github.com/users/talexand/repos","events_url":"https://api.github.com/users/talexand/events{/privacy}","received_events_url":"https://api.github.com/users/talexand/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/sapegin/react-styleguidist/labels/documentation","name":"documentation","color":"bfdadc"},{"url":"https://api.github.com/repos/sapegin/react-styleguidist/labels/help%20wanted","name":"help wanted","color":"009800"},{"url":"https://api.github.com/repos/sapegin/react-styleguidist/labels/question","name":"question","color":"cc317c"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":10,"created_at":"2016-03-29T19:27:23Z","updated_at":"2016-06-03T18:44:17Z","closed_at":null,"body":"React-styleguidist has very specific opinions about where component source, style, and documentation should go. This is very useful (and preferable), but makes it a little bit difficult to figure out how to add things like an SCSS loader. An example of this would be a big help, as I can't get SCSS working with the docs as is.\r\n\r\nHere is my `styleguide.config.js` webpack config:\r\n\r\n```js\r\n  components: './lib/components/**/*.jsx',\r\n  updateWebpackConfig: function(webpackConfig, env) {\r\n    // Your source files folder or array of folders, should not include node_modules\r\n    let dir = path.join(__dirname, 'lib');\r\n    webpackConfig.module.loaders.push(\r\n      // Babel loader will use your project’s .babelrc\r\n      {\r\n        test: /\\.jsx?$/,\r\n        include: dir,\r\n        exclude: 'node_modules/',\r\n        loader: 'babel-loader'\r\n      },\r\n      // Other loaders that is needed for your components\r\n      {\r\n        test: /\\.css$/,\r\n        include: dir,\r\n        loader: 'style!css?modules&importLoaders=1'\r\n      },\r\n      {\r\n        test: /\\.scss$/,\r\n        include: dir,\r\n        loader: 'sass-loader'\r\n      }\r\n    );\r\n    return webpackConfig;\r\n  }\r\n```\r\n\r\nSCSS files are named like the other files in existing examples: `Component.jsx`, `Component.scss`, `Readme.md`.\r\n\r\nPackage.json dependencies:\r\n\r\n```json\r\n\"devDependencies\": {\r\n    \"babel-plugin-react-transform\": \"^2.0.2\",\r\n    \"babel-preset-react-hmre\": \"^1.1.1\",\r\n    \"node-sass\": \"^3.4.2\",\r\n    \"react-styleguidist\": \"^2.1.0\",\r\n    \"react-transform-hmr\": \"^1.0.4\",\r\n    \"sass-loader\": \"^3.2.0\"\r\n  },\r\n  \"dependencies\": {\r\n    \"babel\": \"^6.5.2\",\r\n    \"babel-core\": \"^6.7.2\",\r\n    \"babel-loader\": \"^6.2.4\",\r\n    \"babel-plugin-react-transform\": \"^2.0.2\",\r\n    \"babel-preset-es2015\": \"^6.6.0\",\r\n    \"babel-preset-react\": \"^6.5.0\",\r\n    \"babel-preset-react-hmre\": \"^1.1.1\",\r\n    \"babel-preset-stage-0\": \"^6.5.0\",\r\n    \"core-decorators\": \"^0.11.0\",\r\n    \"react\": \"^0.14.7\",\r\n    \"react-dom\": \"^0.14.7\",\r\n    \"react-router\": \"^2.0.1\"\r\n  }\r\n```\r\n\r\nI tried a number of different things in the loader string:\r\n\r\n- `loader: 'style-loader!style!css!sass'`\r\n- `loader: 'style!css!sass'`\r\n- `loader: 'style-loader!style!css!sass'`\r\n\r\nNone of these result in any output from styleguidist at the terminal, even with a `Component.scss` like `body: { background-color: #00F !important; }`. The components just load with no styling beyond the default.\r\n\r\nRelated issues:\r\n\r\n- https://github.com/skidding/cosmos/issues/135\r\n- https://github.com/sapegin/react-styleguidist/issues/52\r\n- https://github.com/sapegin/react-styleguidist/issues/53"},"comment":{"url":"https://api.github.com/repos/sapegin/react-styleguidist/issues/comments/223660721","html_url":"https://github.com/sapegin/react-styleguidist/issues/110#issuecomment-223660721","issue_url":"https://api.github.com/repos/sapegin/react-styleguidist/issues/110","id":223660721,"user":{"login":"mik01aj","id":3027415,"avatar_url":"https://avatars.githubusercontent.com/u/3027415?v=3","gravatar_id":"","url":"https://api.github.com/users/mik01aj","html_url":"https://github.com/mik01aj","followers_url":"https://api.github.com/users/mik01aj/followers","following_url":"https://api.github.com/users/mik01aj/following{/other_user}","gists_url":"https://api.github.com/users/mik01aj/gists{/gist_id}","starred_url":"https://api.github.com/users/mik01aj/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mik01aj/subscriptions","organizations_url":"https://api.github.com/users/mik01aj/orgs","repos_url":"https://api.github.com/users/mik01aj/repos","events_url":"https://api.github.com/users/mik01aj/events{/privacy}","received_events_url":"https://api.github.com/users/mik01aj/received_events","type":"User","site_admin":false},"created_at":"2016-06-03T18:44:17Z","updated_at":"2016-06-03T18:44:17Z","body":"Then I don't understand what `scss` you want to load. "}}
{"actor":{"display_login":"mik01aj"}}