{"action":"created","issue":{"url":"https://api.github.com/repos/facebookincubator/create-react-app/issues/1281","repository_url":"https://api.github.com/repos/facebookincubator/create-react-app","labels_url":"https://api.github.com/repos/facebookincubator/create-react-app/issues/1281/labels{/name}","comments_url":"https://api.github.com/repos/facebookincubator/create-react-app/issues/1281/comments","events_url":"https://api.github.com/repos/facebookincubator/create-react-app/issues/1281/events","html_url":"https://github.com/facebookincubator/create-react-app/issues/1281","id":195997728,"number":1281,"title":"Css available even if not imported","user":{"login":"Jony-Y","id":10330531,"avatar_url":"https://avatars.githubusercontent.com/u/10330531?v=3","gravatar_id":"","url":"https://api.github.com/users/Jony-Y","html_url":"https://github.com/Jony-Y","followers_url":"https://api.github.com/users/Jony-Y/followers","following_url":"https://api.github.com/users/Jony-Y/following{/other_user}","gists_url":"https://api.github.com/users/Jony-Y/gists{/gist_id}","starred_url":"https://api.github.com/users/Jony-Y/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Jony-Y/subscriptions","organizations_url":"https://api.github.com/users/Jony-Y/orgs","repos_url":"https://api.github.com/users/Jony-Y/repos","events_url":"https://api.github.com/users/Jony-Y/events{/privacy}","received_events_url":"https://api.github.com/users/Jony-Y/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":8,"created_at":"2016-12-16T07:32:44Z","updated_at":"2016-12-16T12:35:40Z","closed_at":"2016-12-16T12:13:48Z","body":"Hi, \r\nI have an issue where once I import a css file the classes are known throughout the app.\r\ne.g:\r\n\r\nin LoginContainer I have:\r\n`import './login.css';`...\r\n`<div className=\"container\">`//html here`</div>`\r\nand in ForgotPasswordContainer:\r\n`import './forgotPassword.css';`...\r\n`<div className=\"container\">`//html here`</div>`\r\nboth have a different class for container and are imported by different files.\r\nBut I keep getting only a single occurrence  meaning if I change one container class then html changes for both.\r\n\r\nthis doesnt allow me to override.\r\nIm used to working with Angular and scss so Im new to the importing css classes so Im not sure if this is how its supposed to work.\r\nBut the way it is now for me importing classes doesnt make sense since they are global for the entire project.\r\n\r\nas far as changes to the create-react-app boilerplate, I have only introduced the node-sass change \r\nwhich doesnt effect any of this code since I watch different folders\r\n\r\ncan anyone assist?"},"comment":{"url":"https://api.github.com/repos/facebookincubator/create-react-app/issues/comments/267585347","html_url":"https://github.com/facebookincubator/create-react-app/issues/1281#issuecomment-267585347","issue_url":"https://api.github.com/repos/facebookincubator/create-react-app/issues/1281","id":267585347,"user":{"login":"gaearon","id":810438,"avatar_url":"https://avatars.githubusercontent.com/u/810438?v=3","gravatar_id":"","url":"https://api.github.com/users/gaearon","html_url":"https://github.com/gaearon","followers_url":"https://api.github.com/users/gaearon/followers","following_url":"https://api.github.com/users/gaearon/following{/other_user}","gists_url":"https://api.github.com/users/gaearon/gists{/gist_id}","starred_url":"https://api.github.com/users/gaearon/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gaearon/subscriptions","organizations_url":"https://api.github.com/users/gaearon/orgs","repos_url":"https://api.github.com/users/gaearon/repos","events_url":"https://api.github.com/users/gaearon/events{/privacy}","received_events_url":"https://api.github.com/users/gaearon/received_events","type":"User","site_admin":false},"created_at":"2016-12-16T12:35:40Z","updated_at":"2016-12-16T12:35:40Z","body":">I thought it would work like that and that seemed pretty awesome.\r\n\r\nYou might want to check out CSS modules which do exactly that. However they have their own caveats (non standard syntax that some tools don't support).\r\n\r\n>so actually importing in the js files or bundling into index.css file actually makes no difference.\r\n\r\nI don't understand what exactly you mean by this. If you stick to a naming convention (like BEM) and namespace CSS yourself by the component name you are unlikely to have conflicts. The upside of dividing CSS files is that, with some discipline, you know which styles correspond to which components, and where to find them.\r\n\r\nIt is **not a perfect system** but it works. And if you don't like it you can always take this CSS and do something else with it.\r\n\r\nIf we supported CSS modules instead of the box we would be locking our users into something from which it will be hard to migrate. Do we know for sure CSS modules isn't going to be superseded by another custom syntax in two years? No. Therefore we try to stick with standards for as much as it is reasonable, or at least provide clear migration paths.\r\n\r\nI understand your frustration but I think most of the problems can be mitigated by manual namespacing. And if you're okay with using something more experimental then it might be a good idea to eject and add CSS modules.\r\n\r\nI hope this helps!\r\n\r\n "}}
{"actor":{"display_login":"gaearon"}}