{"action":"created","issue":{"url":"https://api.github.com/repos/mhaagens/hot-reload-all-the-things/issues/2","repository_url":"https://api.github.com/repos/mhaagens/hot-reload-all-the-things","labels_url":"https://api.github.com/repos/mhaagens/hot-reload-all-the-things/issues/2/labels{/name}","comments_url":"https://api.github.com/repos/mhaagens/hot-reload-all-the-things/issues/2/comments","events_url":"https://api.github.com/repos/mhaagens/hot-reload-all-the-things/issues/2/events","html_url":"https://github.com/mhaagens/hot-reload-all-the-things/issues/2","id":211349642,"number":2,"title":"Loading css using style-loader and css-loader does not work","user":{"login":"amite","id":1308947,"avatar_url":"https://avatars3.githubusercontent.com/u/1308947?v=3","gravatar_id":"","url":"https://api.github.com/users/amite","html_url":"https://github.com/amite","followers_url":"https://api.github.com/users/amite/followers","following_url":"https://api.github.com/users/amite/following{/other_user}","gists_url":"https://api.github.com/users/amite/gists{/gist_id}","starred_url":"https://api.github.com/users/amite/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/amite/subscriptions","organizations_url":"https://api.github.com/users/amite/orgs","repos_url":"https://api.github.com/users/amite/repos","events_url":"https://api.github.com/users/amite/events{/privacy}","received_events_url":"https://api.github.com/users/amite/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-03-02T10:28:19Z","updated_at":"2017-03-02T11:03:14Z","closed_at":null,"body":"I added a file.css in the `commons` folder\r\n\r\nand try to import it like so in `App.js`\r\n\r\n`import css from './file.css';`\r\n\r\nI add `style-loader` and `css-loader` to your setup (inside the rules block)\r\n\r\n```\r\n{\r\n    test: /\\.css$/,\r\n    use: [ 'style-loader', 'css-loader' ]\r\n}\r\n```\r\n\r\nWhen I run `npm start` I get Module parse failed:\r\n\r\n<img width=\"554\" alt=\"screenshot 2017-03-02 15 56 12\" src=\"https://cloud.githubusercontent.com/assets/1308947/23503238/cdf1d306-ff60-11e6-8ae8-2b00d6656636.png\">\r\n\r\nWhat am I doing wrong?\r\n\r\nHere is my full `webpack.config.client.js` file for reference:\r\n\r\n```\r\nconst webpack = require(\"webpack\");\r\nconst path = require(\"path\");\r\n\r\nmodule.exports = {\r\n  devtool: \"inline-source-map\",\r\n  entry: [\r\n    \"react-hot-loader/patch\",\r\n    \"webpack-dev-server/client?http://localhost:3001\",\r\n    \"webpack/hot/only-dev-server\",\r\n    \"./client/index\",\r\n  ],\r\n  target: \"web\",\r\n  module: {\r\n    rules: [\r\n      {\r\n        test: /\\.js?$/,\r\n        use: \"babel-loader\",\r\n        include: [\r\n          path.join(__dirname, \"client\"),\r\n          path.join(__dirname, \"common\"),\r\n        ],\r\n      },\r\n      {\r\n        test: /\\.css$/,\r\n        use: [ 'style-loader', 'css-loader' ]\r\n      }\r\n    ],\r\n  },\r\n  plugins: [\r\n    new webpack.NamedModulesPlugin(),\r\n    new webpack.HotModuleReplacementPlugin(),\r\n    new webpack.NoEmitOnErrorsPlugin(),\r\n    new webpack.DefinePlugin({\r\n      \"process.env\": { BUILD_TARGET: JSON.stringify(\"client\") },\r\n    }),\r\n  ],\r\n  devServer: {\r\n    host: \"localhost\",\r\n    port: 3001,\r\n    historyApiFallback: true,\r\n    hot: true,\r\n  },\r\n  output: {\r\n    path: path.join(__dirname, \".build\"),\r\n    publicPath: \"http://localhost:3001/\",\r\n    filename: \"client.js\",\r\n  },\r\n};\r\n```\r\n\r\n`require('./file.css');` also doesn't work"},"comment":{"url":"https://api.github.com/repos/mhaagens/hot-reload-all-the-things/issues/comments/283623756","html_url":"https://github.com/mhaagens/hot-reload-all-the-things/issues/2#issuecomment-283623756","issue_url":"https://api.github.com/repos/mhaagens/hot-reload-all-the-things/issues/2","id":283623756,"user":{"login":"mhaagens","id":3270517,"avatar_url":"https://avatars3.githubusercontent.com/u/3270517?v=3","gravatar_id":"","url":"https://api.github.com/users/mhaagens","html_url":"https://github.com/mhaagens","followers_url":"https://api.github.com/users/mhaagens/followers","following_url":"https://api.github.com/users/mhaagens/following{/other_user}","gists_url":"https://api.github.com/users/mhaagens/gists{/gist_id}","starred_url":"https://api.github.com/users/mhaagens/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mhaagens/subscriptions","organizations_url":"https://api.github.com/users/mhaagens/orgs","repos_url":"https://api.github.com/users/mhaagens/repos","events_url":"https://api.github.com/users/mhaagens/events{/privacy}","received_events_url":"https://api.github.com/users/mhaagens/received_events","type":"User","site_admin":false},"created_at":"2017-03-02T11:03:14Z","updated_at":"2017-03-02T11:03:14Z","body":"You don't import style.css in App.js, you import it in /client/index.js, the server doesn't know how to handle CSS/images etc. Look into https://github.com/jchip/isomorphic-loader.\r\nThis is just a starting point for getting up and running with hot reloading, not a fully fledged boilerplate."}}
{"actor":{"display_login":"mhaagens"}}