{"action":"opened","issue":{"url":"https://api.github.com/repos/css-modules/css-modules/issues/231","repository_url":"https://api.github.com/repos/css-modules/css-modules","labels_url":"https://api.github.com/repos/css-modules/css-modules/issues/231/labels{/name}","comments_url":"https://api.github.com/repos/css-modules/css-modules/issues/231/comments","events_url":"https://api.github.com/repos/css-modules/css-modules/issues/231/events","html_url":"https://github.com/css-modules/css-modules/issues/231","id":226418000,"number":231,"title":"Inheritance Of Local ClassName From Another File","user":{"login":"marekkobida","id":12018118,"avatar_url":"https://avatars3.githubusercontent.com/u/12018118?v=3","gravatar_id":"","url":"https://api.github.com/users/marekkobida","html_url":"https://github.com/marekkobida","followers_url":"https://api.github.com/users/marekkobida/followers","following_url":"https://api.github.com/users/marekkobida/following{/other_user}","gists_url":"https://api.github.com/users/marekkobida/gists{/gist_id}","starred_url":"https://api.github.com/users/marekkobida/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/marekkobida/subscriptions","organizations_url":"https://api.github.com/users/marekkobida/orgs","repos_url":"https://api.github.com/users/marekkobida/repos","events_url":"https://api.github.com/users/marekkobida/events{/privacy}","received_events_url":"https://api.github.com/users/marekkobida/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-05-04T21:46:17Z","updated_at":"2017-05-04T21:46:17Z","closed_at":null,"body":"My issue is described in paragraph 04. in code comments\r\n\r\n## 01. About Container\r\n```\r\nimport client from '../scss/client.scss'\r\n\r\nimport React from 'react'\r\n\r\n/**\r\n * Components\r\n */\r\nimport { Events, Event } from '../components/Events/Events'\r\n\r\nclass AboutContainer extends React.Component {\r\n  render () {\r\n    return (\r\n      <div className={client.container}>\r\n        <Events>\r\n          <div className={client.row}>\r\n            <div className={`${client.column_xs_12} ${client.column_m_6}`}>\r\n              <Event header=\"Aenean tristique\" />\r\n            </div>\r\n            <div className={`${client.column_xs_12} ${client.column_m_6}`}>\r\n             <Event header=\"Curabitur lectus\" />\r\n            </div>\r\n            <div className={`${client.column_xs_12} ${client.column_m_6}`}>\r\n              <Event header=\"Aenean tristique\" />\r\n            </div>\r\n          </div>\r\n        </Events>\r\n      </div>\r\n    )\r\n  }\r\n}\r\n\r\nexport default AboutContainer\r\n```\r\n\r\n## 02. Events Component && Event Component\r\n```\r\nimport css from './Events.scss'\r\n\r\nimport React from 'react'\r\n\r\nclass Events extends React.Component {\r\n  render () {\r\n    return (\r\n      <div className={css.events}>\r\n        <h1>{this.props.header || 'Udalosti'}</h1>\r\n\r\n        {this.props.children}\r\n      </div>\r\n    )\r\n  }\r\n}\r\n\r\nclass Event extends React.Component {\r\n  render () {\r\n    const { header } = this.props\r\n\r\n    return (\r\n      <div className={css.event}>\r\n        <h2>{<a href=\"#\">{header}</a> || <a href=\"#\">Udalosť</a>}</h2>\r\n      </div>\r\n    )\r\n  }\r\n}\r\n\r\nexport {\r\n  Events,\r\n  Event\r\n}\r\n```\r\n\r\n## 03. client.scss\r\n```\r\n@import \"variables\";\r\n\r\nhtml {\r\n  box-sizing: border-box;\r\n}\r\n\r\n*,\r\n*::before,\r\n*::after {\r\n  box-sizing: inherit;\r\n}\r\n\r\n.container {\r\n  @include container();\r\n  @include container-widths();\r\n}\r\n\r\n// ---------------- ORIGINAL ROW ----------------\r\n// This line -> webpack -> new class = .row--3lwXx31s\r\n.row {\r\n  @include row();\r\n}\r\n\r\n@include columns();\r\n```\r\n\r\n## 04. Events.scss (issue in comments)\r\n```\r\n@import \"variables\";\r\n\r\nbody {\r\n  background: rgb(247, 247, 247); // 8\r\n}\r\n\r\n// ---------------- ISSUE HERE ----------------\r\n// This line -> webpack -> new class = .row--3iu10fun\r\n// Issue: I need here original hashed className from client.scss = .row--3lwXx31s\r\n// If I choose something like composes: row from \"sass-loader!../../scss/client.scss\"\r\n// , compiled CSS will have duplicate of all in client.scss\r\n.row {\r\n  background: #f00;\r\n}\r\n```\r\n\r\n## 05. webpack.config.js\r\n```\r\n        {\r\n          exclude: /node_modules/,\r\n          test: /\\.scss$/,\r\n          use: ExtractTextPlugin.extract([\r\n            {\r\n              loader: 'css-loader',\r\n              options: {\r\n                importLoaders: 1,\r\n                localIdentName: '[local]--[hash:base64:8]',\r\n                modules: true,\r\n                sourceMap: true\r\n              }\r\n            },\r\n            {\r\n              loader: 'sass-loader',\r\n              options: {\r\n                includePaths: [\r\n                  resolve(__dirname, 'src/andrej/scss')\r\n                ]\r\n              }\r\n            }\r\n          ])\r\n        }\r\n```"}}
{"actor":{"display_login":"marekkobida"}}