{"action":"created","issue":{"url":"https://api.github.com/repos/css-modules/css-modules/issues/65","repository_url":"https://api.github.com/repos/css-modules/css-modules","labels_url":"https://api.github.com/repos/css-modules/css-modules/issues/65/labels{/name}","comments_url":"https://api.github.com/repos/css-modules/css-modules/issues/65/comments","events_url":"https://api.github.com/repos/css-modules/css-modules/issues/65/events","html_url":"https://github.com/css-modules/css-modules/pull/65","id":109767111,"number":65,"title":"How to use css-modules with other global css (discussion please don't merge it)","user":{"login":"lapanoid","id":154949,"avatar_url":"https://avatars.githubusercontent.com/u/154949?v=3","gravatar_id":"","url":"https://api.github.com/users/lapanoid","html_url":"https://github.com/lapanoid","followers_url":"https://api.github.com/users/lapanoid/followers","following_url":"https://api.github.com/users/lapanoid/following{/other_user}","gists_url":"https://api.github.com/users/lapanoid/gists{/gist_id}","starred_url":"https://api.github.com/users/lapanoid/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lapanoid/subscriptions","organizations_url":"https://api.github.com/users/lapanoid/orgs","repos_url":"https://api.github.com/users/lapanoid/repos","events_url":"https://api.github.com/users/lapanoid/events{/privacy}","received_events_url":"https://api.github.com/users/lapanoid/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":18,"created_at":"2015-10-05T10:12:24Z","updated_at":"2016-03-10T17:26:15Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/css-modules/css-modules/pulls/65","html_url":"https://github.com/css-modules/css-modules/pull/65","diff_url":"https://github.com/css-modules/css-modules/pull/65.diff","patch_url":"https://github.com/css-modules/css-modules/pull/65.patch"},"body":"@markdalgleish @joshwnj\r\nInitially I was tried to make two loaders working together \r\n```\r\n{\r\n      test: /\\.less$/,\r\n      loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!less'\r\n})\r\n```\r\n```\r\n{\r\n      test: /\\.less$/,\r\n      loader: 'style!css!less'\r\n})\r\n```\r\nand made an issue for this https://github.com/css-modules/css-modules/issues/59 \r\nBottom line of this was:\r\nname all local css - *.module.(less|sass|whatever)\r\nkeep all global css - *.(less|sass|whatever)\r\nand have these loaders\r\n\r\n```\r\n{\r\n      test: /\\.module.less$/,\r\n      loader: 'style-loader!css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!less-loader'\r\n}\r\n{\r\n      test: /^((?!\\.module).)*less$/,\r\n      loader: 'style!css!less'\r\n}\r\n```\r\nThis is ugly, but solves the problem on some level.\r\nAs @markdalgleish said there a lot caveats of having both global and local css, so I hope this PR could be a good place to discuss these caveats. The goal of this PR make reasonable FAQ on this matter."},"comment":{"url":"https://api.github.com/repos/css-modules/css-modules/issues/comments/194966517","html_url":"https://github.com/css-modules/css-modules/pull/65#issuecomment-194966517","issue_url":"https://api.github.com/repos/css-modules/css-modules/issues/65","id":194966517,"user":{"login":"SohKai","id":4166642,"avatar_url":"https://avatars.githubusercontent.com/u/4166642?v=3","gravatar_id":"","url":"https://api.github.com/users/SohKai","html_url":"https://github.com/SohKai","followers_url":"https://api.github.com/users/SohKai/followers","following_url":"https://api.github.com/users/SohKai/following{/other_user}","gists_url":"https://api.github.com/users/SohKai/gists{/gist_id}","starred_url":"https://api.github.com/users/SohKai/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/SohKai/subscriptions","organizations_url":"https://api.github.com/users/SohKai/orgs","repos_url":"https://api.github.com/users/SohKai/repos","events_url":"https://api.github.com/users/SohKai/events{/privacy}","received_events_url":"https://api.github.com/users/SohKai/received_events","type":"User","site_admin":false},"created_at":"2016-03-10T17:26:15Z","updated_at":"2016-03-10T17:26:15Z","body":"@geelen I agree that the module file should be pure, but realistically, I think most people will still have to deal with global stylesheets that weren't written with CSS Modules in mind. `compose: ... from global` handles cases where I want to extend a global style nicely, but it'd also be nice to have a way to declare (and load) those global dependencies from within a CSS module without resorting to wrapping them in your own `.global.css` file.\r\n\r\nI guess this is painfully obvious in hindsight, but importing into global works if you just nest the import in a `:global`, ie. `:global { @import 'foo' }`. See https://github.com/davezuko/react-redux-starter-kit/blob/master/src/styles/core.scss; this is simple enough that there doesn't need to be a plugin. I think this also handles multiple modules importing the same file (ie. it's only imported once in the final file), assuming that all the modules have the import wrapped in a `:global`, but I haven't checked yet."}}