Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can't access assets within a component #9

Closed
davidecantoni opened this issue Oct 21, 2015 · 24 comments
Closed

Can't access assets within a component #9

davidecantoni opened this issue Oct 21, 2015 · 24 comments

Comments

@davidecantoni
Copy link

I would like to access assets from a dump component.

Unfortunately it is not possible because assets is only available inside the Html component, that's where the subcomponents get render to string:
https://github.com/halt-hammerzeit/webapp/blob/master/code/client/html.js#L39

How can we access the assets property inside a sub component?

Thank you very much!

@catamphetamine
Copy link
Owner

I could think about that.
Why do you need assets inside of a component?

@davidecantoni
Copy link
Author

The thing is that i wanna make use of a css/sass library called 'purecss-sass'.
What i did, is setting that npm package inside our webpack config:

module.exports = {
  devtool: 'inline-source-map',
  context: path.resolve(__dirname, '..'),
  entry: {
    'main': [
      'webpack-hot-middleware/client?path=http://' + host + ':' + port + '/__webpack_hmr',
      'bootstrap-sass!./src/theme/bootstrap.config.js',
      'purecss-sass',
      'font-awesome-webpack!./src/theme/font-awesome.config.js',
      './src/client.js'
    ]
  },

Inside a module i try to call it via require:

const styles = require('purecss-sass');

Client side rendering works perfectly but not server side rendering.

Any thoughts?

@catamphetamine
Copy link
Owner

Well, let's begin with

  entry: {
    'main': [
      'webpack-hot-middleware/client?path=http://' + host + ':' + port + '/__webpack_hmr',
      'bootstrap-sass!./src/theme/bootstrap.config.js',
      'purecss-sass',

Why are you putting 'purecss-sass' there?
Is there an explanation of why is it there?

@davidecantoni
Copy link
Author

No explanation, just tried :)

@catamphetamine
Copy link
Owner

Ok.
From what I read here:
https://webpack.github.io/docs/configuration.html

entry
The entry point for the bundle.

If you pass a string: The string is resolved to a module which is loaded upon startup.

If you pass an array: All modules are loaded upon startup. The last one is exported.

entry: ["./entry1", "./entry2"]

So, 'purecss-sass' is required immediately on the top level of your app.

I'm not familiar with this module.
You can post a sample code of what you're doing with it and what's not working.

@ricardobanegas
Copy link

PureCSS is micro CSS-grid-framework, and me and @davidecantoni are working in a project where we want to replace bootstrap with PureCSS.

Our problem is that purecss-sass doesn't have a loader to be integrated with webpack (similar to bootstrap-sass-loader), we are looking for the best way to integrate PureCSS? Or is it better not make vendor-css isomorphic?

How would you integrate a css-framework from an npm package in a project?

Similar question: erikras/react-redux-universal-hot-example#351 (by the way, our boilerplate is react-redux-universal-hot-example)

@catamphetamine
Copy link
Owner

I still don't get it.
What are you doing exactly in your code, what's the outcome, why isn't it correct, does it throw anything?

@ricardobanegas
Copy link

What we want to do:
We want to be able to access PureCSS classes (https://github.com/yahoo/pure/) from our react-components, like so: <div className="{purecss.classname}">.

The outcome:
When we do require('purecss-sass') from inside a react-component, it works on client-side but server-side rendering gives us an exception.

Throws:
[webpack-isomorphic-tools] [error] asset not found: ./node_modules/purecss-sass/vendor/assets/stylesheets/_purecss.scss

@catamphetamine
Copy link
Owner

@ricardobanegas
Ok, the throws section is the only one I understood and it's the one you should nail.
Run your project in development mode.
Post me the content of your webpack-assets.json (should be formatted in development)

@davidecantoni
Copy link
Author

{
  "javascript": {
    "main": "http://localhost:3001/dist/main-357675bc90a839a2a879.js"
  },
  "styles": {},
  "images": {
    "./~/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.svg": "data:image/svg+xml;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICI4OTg4OTY4ODE0N2JkNzU3NWQ2MzI3MTYwZDY0ZTc2MC5zdmci",
    "./src/containers/Home/logo.png": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExODIyQUNDNjJBRjdFQjgyRSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGM0RENEFGQTJEODMxMUU1QjQ4QkIwRjdGNEM3OUNFMiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGM0RENEFGOTJEODMxMUU1QjQ4QkIwRjdGNEM3OUNFMiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDE4MDExNzQwNzIwNjgxMTgyMkFDQzYyQUY3RUI4MkUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDE4MDExNzQwNzIwNjgxMTgyMkFDQzYyQUY3RUI4MkUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6PIVwFAAAbLUlEQVR42uydDXRV1ZXHd8ITkpAPkhjTgIhTO8TVajsSpNUOJnY+qqvEsnTomIhWOsPLSC0dCK5xRq1hpK2uEqyO0vKY4hcmY2lnkGQcO/UjqKOjQhi7tGNi2xGRxBhCSPISQj7em71vbugjvITc83HfPfft/1pnJbxw7rvvvvM7e+/zsU9KNBoFFosVXykMCIvFgLBYDAiLxYCwWAwIi8WAsFgMCIvFgLBYDAiLxYCwWCwGhMViQFgsBoTFYkA0aP8gpLUMwTmtw3BB2wicT681D8I19DMzFToXzoTX6Pe5AXh/7gxow3+3Y+nDf3OPwoD4U61DEKjrg6VNA1ARjkABvrTc4SV2FwXg7ZI0eKFkFrxdngmd3IQYEOOFFiKlpgtuti3EcoWX3l2aAY+WpcOrDAsDYqRCx6A41AP3KgbjNKFbtr0sA+ors+BldMVGuGkxIJ5XsANWabAaZ7Qqi9JgT1UO1KMrNshNjAHxpCrbYR3GHFsSeAsMCgPCcEwXlA258AS7XgwIwzEFKMsy4cGafHiRm505SvXTh6k9CpciHFd49PaWN4bhhbJDEGoIW0PMLLYg7okm/qo6oN7lgFzK7UJr8ihPPDIgrqj8MNzTPgJ3mnTPNDQczIFNldnwATdFdrG0iVwWhOMi0+47HIHVW7rhgepO+Co3RQZEm0I9sNYQ1ypubLJ3AHaTBSQ3kZskA8LWI47IPaQYqq4XzuNmyYCoA6QflhlsPU6zJuRy1XTBldw0GRBp0SLE8SXqPpI1HEzzOfT5uIkmVkaPYpE7gj3uQdnrZKZCbUka/LL4LPgN/btlGD6FLs/5rUPwefu/rErE56NRrlAhrOEZeAZESPZixB0y1yjNgKtqC+AXk/2dAuemAShuOg5XITTFbsNCkFTnwh28nJ4BcazFB+HfZOKPogDc3jAP7pvu/0dQMjHm+eLeAfhLl0HZfXc+BBkSBmTaUjBz/gg2utuw0XWJxD6hHrgMY4W/TpT75VENYDmGhZ5pOxZyf3+L5R0sB7AcVv2G+xYwIHFlb4R61y3rwaAoEUHzApbnsOzBctTrgBg7ioWB9IUy9cvS4VnZe6B1VDX58Oq2sUD6b8gqMQNT90tYbrCfU0cKWLHf17AEvHrDxgKCAfMnJao/gq7V26ruhTZE1RXBtvW5cBeNiDEH01IAfZc/x59PkSuGDXE9/kxnQBRJZlk7NuKj2OOPqr6nymw4jKDctigNrmdr4swYR8DqWFrQqlzPgEhKdgIN4XhT2zeNbleoEJ4K5sB3GRLHmo9WhQZeGrGcw4CIu1ezQGJ4d/Es2Kf7HoNz4LdoTVbTYAC3e8f6CpZfUajIgCQiUgxYQ5HaRW4cjZSxyyWkQiz/ieUmBsShKGWopBvU7+b9kstVkQUPMCSOdRaWx7DcwoA4UDgiNdrxSFYqDLt9z9V58BZNTDIkQtqK5esMiEvSMYI1HdGsPcUlPBQspO1YrmBAkgDO6lz4Pj8JIXeL5kwKGBAfq3UIZtR2w9/zkxDSJ7D8JPaFynYGxFcKdsB9GENV85MQ91SxXBvT4UBNFwPiC2FvV8VwKNH9WGguzJowbgxbm+e0KMDP2h1hL3c59nY/Vn1ZLA9i8cKS7Cy75GG5AMvnsFyGZYmGjpgSW9DQ7w/HXwj1ACxOs2I8BsQ0Ye82z14Sr1rYd0K3Rz5m7OTrKzG/EzC0weybWD6j8P1oyPxhLNaQPVpm2NxtzTmxi2WSaGPXlm64B/TsFzFhMw/t+fgRlothbCFim6LrzsVyXewLzYNWGigGhA7UlKlPI0lu3CctqqzuhE2QPJupUqb4N8H8lA3KM4re77QZdnK1kh6QrFQYkqi+qi9ijalr14ZOCGoOyr2WFig6DQtHFoVSNT2p4P2WYpkX+0I7dkoqrUhSulgIiPbYS1NQHg8QE3Nn0UoGWjrytILPv2IilCqtiJGA2Eea7ZZwsQp13h/2YPmagnI/dXAEyY1Yfid5nasnvoBWhGI/tiASFiRT17VjZsrdijtMzr7Yh0W2I6H1WROTfqc09Cc5IEUB8T3lsgkfphIG5Rt4MtCRXpR0tQiOSya+2DSgpuMwGRBh00xpRTXB8WW89r3c5h3ru5L1L5sYh9C8iAo3y1hA5gbgfQlAilXfD00G2hkX3VTEJ4BQjoBmifqfi/dicgMyQ27CScVhNXQNKqFjcIHGycBk0S6Jup+O9+K+E/JulrFLTSQnC1e1DMFdJWlnToVJALSNwGy0OnMo6zsG+HOaB+HLsddK8KPwyyGgP8Miuk8mrkfQrMCCGAsIuliUB5aGeoWym7QOAyWtPBwLAkKTjyCcTUF86xBcin5snsetgp9OyKWjJ6jTKxKoS4skc7CcNgOCnRu1laS0IFJnZiAQS4MdMJ8C9kQca8CKq9cgZq+HQ82bAEjUjjeTExAbkpewpxeyIDTa1M7H0nhNzRKAUKabX8f8m+KPKAXqJRLRptEThTJDvT5R1GefR+b7nBPn2UgvxTEakOKzxI8/YHlSBxUCMg5JNGkBaRu19gT4QW3MhvRziLuFYd8JuRsyLgahc9GbjsPlewfgZvDJ8c8zU+DIUNQ3sMtIJiVslo4bMgKQpgHIRihK8GdFOAKr/dQiMlNhE36mpYLV/XZM9JCGa6bIuFmeBYR24zWGYWFDP6xsH4GL/GItJmhrMAe2bukWBsRvGpCoO9myG6kYxHOA0IQdQkHn/q31KRQntSgNnq/MhvYt4mkXYkdpokkOl5bEP54BhNyouj64rnnQ2o65PAm+0K01+dYx1jJKlXUhPCaZ9XFxZ7WKzzIcEAq6Qz2w1sduVFyha7WZTqNS4F/7KQ6RASSuHc5KNRQQcqVqu+EW+6zBpAGDVBSAdcE58H+KAlA/ASIzEhV3BCzTNEAo+K7pgpuTyJU6zbWqzrVS+auQ37ZMF0nU7YjrYs00CJDQMShGd+peA8DYbvf0LVg+QFfoUGPYWkinJDAvy1B6wpWfLIhMMo1Dk1hr7wNC7hRajTswzrjTqzBgw/3l4lnQvHAmdCAQx2MP2ak9Cp/1UGAeL0j3S6B+gWC9j7CciOdezfU6INi4Lq3vg3/wqtVAEF6vKzr1zIkJcM/C+7/VQ4H5ZBbED5CI5u7933gvlqTJ35A2HxaD70BlO6zDxvWGl10qvM/PTwl4N6zEH9Kz9woD88ncKz9YkIsE68XNcFMyy6OA0NBtsAO2YuPbYsCXspoSvcX7Q10vzD0TQNN1rdB6PK7h3v00ikW5yi4VrHsg3osY63kPEArEN3ZByKQ1U03HYVEcyzKD5mdUWA8KzMszrZy0OgDxS7BOy21Ek4q/Esd1lo4/lAOCgfiVhoxSnaK9A6fld6WzJq5FyP9OhfWoyoF/13TrkRjXynQX6zrBerSP/b2JL1YoWtubqhKOBK2f2oX+fQ0+kMXLMqFUhZtFgXnzIPyZipvDe3ocg8UTmj57FPwRe9C59ysE657W+dDoVbmi5LIBQ+HYhQ+hs3w27MAH8dZ4Agd7BfAukYdd3wfL8VrWaNa2HmsSU9q1oqXsGHu8ofE5RHwCCWV6zxasu2fiC5UKd4YEDINjF/rzDQjGs9iYOyf+kYZQEZaXMX5wDAgF4wjYDrQeeaqsB35ROzQM606MQUyHg6zHdwTrHsHy7ETrEZzjEUDqeuE8l+DYha7KQ9gbv3ymBoeu1r9s7LIOtnTsZtX3wmoM2NUMyZD1UD+sG8/FMj04/0cQX2LyBNhnFI6rOlftzQnHIPbZew/ohAMbGQ2PFu9bAF+ryYeXptMb25ZFKI0lulmgKBUQrbe634XGZbp7RZZaNBM+rXQ4pSNE70JZ7CENCC0d0QXHOBhN8+Gb2Au3CgTGDyXyWy8KwHuahnX95GLR/NLPJCxgPZb3Y12rkIZjkYQAoeUjmtZVkStVWlcEt4qAMa6ydGviaFeCvnhab/UjF9/PxBW9lAX/BYnAfGhi3FJboOdGHccg5FrZa6uUgoG97jvYsO6zj1eTUlkG9NH1EOIVbn/zNCmocVh3MjfLFFH4vBnLX0le54dYTsZ3d+erWXelpPfZ1gMVil2rXRhY39cwDzaqgONkLDLbMsGuWw+Nk4KTuVgmBOk0UvW3WFoUwEFgbIwZlFEedwgDQtbD3uikLNbYVgg3VefBftUfDF2199x2szRPCk4FiRc1w44zKJD+EAsNWpwjeU2a97kZYrKfVOfp/RCOXCzKNqLKeiycCWsx1vgnXR+MRrxKM+DxeMtIdFkPzZOCXoQj2+5k8+zGfy6MLVmnMwOX2q+rFB1S9JKbH9ARIPach4pA/CEattX94Sqz4DkERGhmXcR6aJ4UnKzB3APJoT2J+KzTdrFoCbsC6+EaHCSKaShY1/0+LiwpSXbRs70B4Pe7PD0HyP4TwptZToqWibgFR0wQt8MFS7UjAdYjWUSboa7GEk7Em08bkNYh+COZN6IVt6FCa2mAq6rMhkM0GKDVeuhfUpKsokQZtEL76BSejWcAuULGtarOTdzuwrIMeEqn9eB2rEU/xfKnU8FB2thlrepIPCAyohW2NHmXqCdNixxBw5AvWw8totVwt2G5HqaZzLoRrUhlu8GAlKXDLxL5xMeXwau+bvlsfZYpSTVou1Q02+4opkMPB8oPj/00DpC2UfhEop98X0T5mDy0DMNCbtNKRQtG6kBw+y2txA52jB39bBQgTQPW4rSECd8/Cx/eZ1Rft3kQ/oS253K7Vio6v55W+VKCPcedWjgCsKHTMEDwpgvqemF+op54XZ81f6NjsnDNth74CrdpLaLv7FdYSpxWJDcr2OEyIHQmucT7rAj1wO20Z9ztp0zviT19ua7rkxVJxOdKEs3DQrHjMoHvhVJQuQrI/0hakTVo+m51+wnX91o5r3QuNVmD8C/htqxNtBL4X7Fc5bQifi/SQfu0ASmZFT+9o0PT9yCavhvdfLoN/fAN3e/RGIab2IpoFZ0T9XMsjierZedIpg2Ivdd7twKXpNwtSGj9GMU/LrwVWxH9yrAhcbQLkSyIzGy7oyB9WaZQtpDT4hGE5PHKdviWC9bjKgB3lruzFXFFn8RSK+JqiSolGp3+fAxtmKrqsHbqKdkTQmukagugWuVOwtjg/JrD1kSea9tusQP5Qk0+vO603uKD0AQglBVyJ5Z/hrHTlXoDAMdH3N+CSz06DXXnwFj6Hjrjg4bUyaJeDHr2rFBcecBJBdqWK7Lz0NF+EGrIi9JgD1oAJYBQ4I7AFQRz4E6ZJA0JCs7jWhFa9u7iyl7avUjHH1Mf2ffZNOjH78ZtQKYaK6JNVF/FcguMbaJSpbuwXOvUiogA4ngepCrHsiC7FX5YGgLeRC4XnSliUnDugViEYIjE/O41fQxjJ3hRZ/UXMJZoWoUIOkfzajTLvn/QBUDIiiiKRU6BhEa4EJK62qPOJ4YmimbOXQrOvRCLmJKfd3wU6k0F10oV8Q4a+l0AhIR+9osYP2zX8BBX1PfBvrJD8LC9g1HUepS67V55wIqYsGGLLMqVWP5bkRVx2nG6A4gNyQbFrtYpscnGLni4/DDcLQLK3gG4KZGtwEUrMgrmZXjvtwd5ZN0tSiCS7rBdOYZEGJCyDOityILv6YKELAD6jTVOQbH/n6j12FmaYa2t2mmIFYmCmfl5adQtKHkNmjx0+oxTnCYnl1qsWJ0Hb2KDelTzwxwH5WNyvULHYOFUvTO6aNeLvtGiNHi2tgCeKQrAuwZZEVP3wjdikd0n5HRkLIqBeoprgJCwQT29cCasd+OJkuuFPXMLzW9Ud8IyCsZj/04NEoP9paLWoyrHCiTJfaw1xIqYFH/E00bJ+hc7reA0e7+S5e51RXC/W5CMWxWMMxo2dMJPyKrQyBcNESMw54q6V3j/r45PWNrzPc+qsCIu7Bcx+aRbSspwQKK+0IY1J8O9yvaDJAASCxSyKjTyVdkOw1u64QPRCy2bDQ0TBiHqVFgRzftFYgN0UyF5UqLuAhGrmxBAEgiJCu2szLbyx54UzYYHc6zTj6SkeddhFMw/p/CnEnVpv4jjo6PbRhMEyDgkyzLhS6BvdEu5SjPiZ4IPzoH3MlOlJ0V1WpFYMEwF5BCWg4J1qf2e7dQldTJ4omXLLU0kYu97uymQlMyytnbGVXWulQ9WytXSaEWiYO5Qb6xkMs44BSQajiTQgsT0vi2bC+DrmmbclbpXZRlweLI/lmfCEQUBu04rEokJ1k1Vs0TdfKcVnOwy1Jq0gSYT0eWqwgb2Da9aE3KvzrT61h7+9aIV8UOQTvqNRN0MnTemPasJNb5QITyyPhe+7UVrgr3JJcEOuCF0DP6wIQxnx1tRbC/Q3CZrRWq7oVJTkB6JsSQMiEIF3HoCldnwAVqUqpoueM0+pWq5F76Z9hHYRJNHzb8f+rMsBblVxWfBr7NSIYyAHCpLh7caw9IwLkYIn1Z4Aq7pI1jjapOom63zxhztKFQlWi8V6oG1mk7K9bSKArCuYZ51COVJSewopBSddC3Ke0yrjIYNfjSjgh7NKiyPOm33+xZMr1NJyBHClAACG8ldwRy40IAgXrXFIldOVRrU2Fn0FLR6JscholY1x+gYZCrRSBcF8abNmyiIRdbpAMTw5xKWeAba/n/CD6GnIJ7mTfbMg2uTBZRwBO4MHYM/UBio+yEOEc09kinwvMwBJB4oFVmwxO+uV12fkj3z48O7fgCkX7Ce1oGmVK89JQKF9pk0zYfg+lxYgEHtJj9aFbIiNV3WOeKyLpYnv0cBDQjWSxeoEzUWkFjR0DAF8zQjX5phDQv7ChQFm6pSYorpkIhaEMeTr4vSPGKeVIlm5LE8jb8+XdcL5zX2w3X2mYnLDW8Ua9CKPC/pAcywf6bEuFvJFIPMTCoXazpWhVYMY1lhL2ExWrQEZYb495AaAweA2XGIqIvleCZ98SwfAzKuhTNhpH3EytVqutZg854rCUgsJMkGyAyBtuN/QEgIyEV+iEVGo0KBZiwg4ANARE9BznI4oOEIkICpT5MSaUvGILGrc1cm+OOIWpAU+zv0wyhWr+brW+5nUQBSnORONhmQBTL1aTFiqBCepNW7LUOwDq1R7r4TsAR/no/lQg9AM133IjZANzlIF3WxnCw1SSlLd/Z8jAWkbVS41x0P1N4Yj2WwHMFfjwQB3osBcDWCczbCUtAyDJ9GkJaEx46S9hI4scG5yel/ZABx4lpGnWZ4NxcQ7Oklg/yPpvo77QHBQokcqFBqmifjgRNjcRLlqkXh1CzvyeZiZTr4zh3FH0YDYu8pEY4/0A89LlIxDjiWarrgj+39Im5CkmKDQenQIgk4G0SlRBcrBmKexZSfvyLL+cX9ENyJWpARlderyYdXKPmcyx9jHI4RH1gQ2aUmU8KBwbk7B+h4JEBPk6mvIvduPG0ugB8rSBPkFJBRH8QfMoBMa9qvfLbYxU22IMslAHlfxw3ZK5Jpl+ROl54BQTFsQ2I6IMcE651xyy12WrT3KHkAkR3ipb3muu6tLAP60Nfd4hIkUZ/AQRJdrHhGb6IyS/ymkjIGoUQMOq9fnQcHXI5H/ACITAySqsN6GAtIX0Quk8WZhngNikf8kJtX1oKQJt3jX5Mvd1NGAtIyLLcGCy2I9uwfLsUj40G6X9SrEpDSDMvlTT5ATBHFI3aGeF2Q+GEGXYWblRfHS6DDnaSVjIDsLArACbfejDLET5Y9XoHIeoz4CBBRN2v+xLhD1rVKagviZDWnCtG5h9ijrdFgPYbAP6NYVngpWO/cWDhChc6XlDAgCRb2aNsVBu3j8x8DPrMgottuP6UDDgbERdHSFvzyqhXFIwQErSXrZgti6SIdcDAgCYDk7nwrq6IsJBHbX//ItiB+kej81KJwBGYs1JC+gQFxWXQgj4qzD+3GdMRH1kPGgtAyxEU6bogBSYCKApZrJOtikQU55jNAZLbdljMgiiSZrE1Kdb1w7sYuuF/yMuRWHZUIamWk89l9LFF35eKD6ttzMgKysn1E27HMU4o2VW3phu+D3KaqqO2KvAWg7CAer+hDibqUDPwaBgSs/eSvmnbPle1wS2MYqkB+xyFZj99heV3CZ5d177QZd8n6P0Arkp70gMhq/+CpM6+a3yut7BA80DoEWxXAQY2T4pf/sgEZ9dlX86FkfZoP2YaQpCQ1IBjkSrkWbaNQ6MZ91h6FS6o6YHs4AmsVXZJOUqS9LJTPtz0BAXqK5hiELKPsVoQbsTyFkOQnLSBzA3KuBfbmF+u8P8q1RS5VfR+sB3VJHGjuowvLczB2rvhQgh6/TijpM+5XcJ0VNijJCQhlFgGJoxCwAV+u697oOGmE4xFFLlWsaIHlO1hetEHxq5730s0YG4Ogm/W2RPWVdCa66liDrEaoB74D6lP/UM/6sQ1HCyR+9lynm7XLS+3M2LxYC2fCvnaJZtJ0HJaUZ8IzsvdBcyq13XD13gGoUAxG1LYaFGu8mZkKmyuzLNcqkYF5dDI3qyQt/u8Cehc8lIjbWEBKZsGBvQPi9alBY+P+D9Gl7wQGWosvKhq6nawxEgxDCMczoULYh52Cn2bNjZCxLtbiNGvMXOZItpXU84sE4DThd81heBzheBn0ZlIcRTjqEY4nGA62IE5drBFsPJ1hiXyCZEUwFnmDFhCeyVo0DcC8xn4otwN8N9KLRvHzPYZwbMLPGuGmmqBgKxo1t2PCnvxK7MVfkLzMzmWZsK0sHd6KTeaAUGQiDPP3n4AvuAjFSSEc2xCOW1WnSGUlESDYq2dv6ITHwPzDPCdax/V0DiM3T45BpESn30oO93pNu9GafYnhYECUqXy2a3lwtcOxPhe+XZNvzXWw2MVSaEkOQQiD9dWm3j9awU21BbCR4w22IFpUmQW1plqN0gxY3jAP7mI42ILodbUOwz3tI1aqTyOUmQrbq3PhjvJM6ORmyIBol0EjWrsXpcEejDUedTuBHSuJASEpmhfRajUQjA00+sZNjwFJTDzSDutah6wDbDxlNSqy4HvVefAmNzkGhOORCe7UhlxrLRUH4QyIN2QvKPxWAi2JBUZVDtTbm7tYDIj3FOyAVfZ56ssZDBYDEkehY1Ac6oF7NUNCS0QeLJ8NrzEYDIhxouXq6HLdrNia7Ma44qVls+HnldnwATclBsQXsUldHyxtGoCKcAQKHMJibc4iF6osHZ4vy4BDPI/BgPhWlGShZQjOaR2GC9DCnE+v2RbGSgiBhXI00Znq9HtH8Uz4mN0nBoTFYjEgLBYDwmIxICwWA8JiMSAsFgPCYjEgLBYDwmIxICwWA8JPgcViQFgsBoTFYkBYLLf0/wIMAA+4ZzeRT+drAAAAAElFTkSuQmCC",
    "./src/containers/About/kitten.jpg": "http://localhost:3001/dist/c29770d03d2e95e3ea5899d57c6cfeab.jpg"
  },
  "style_modules": {
    ".s": {
      "hidden": "hidden___3mlMf",
      "pure-img": "pure-img___3hFAe",
      "pure-button": "pure-button___3c3Op",
      "pure-button-hover": "pure-button-hover___3-Nsn",
      "pure-button-active": "pure-button-active___1ioIc",
      "pure-button-disabled": "pure-button-disabled___wD3Gd",
      "pure-button-hidden": "pure-button-hidden___37hqH",
      "pure-button-primary": "pure-button-primary___3MXVp",
      "pure-button-selected": "pure-button-selected___2mZRi",
      "pure-form": "pure-form___YT_cv",
      "pure-checkbox": "pure-checkbox___2SMib",
      "pure-radio": "pure-radio___2O_IH",
      "pure-form-stacked": "pure-form-stacked___ojRFy",
      "pure-form-aligned": "pure-form-aligned___EmZxo",
      "pure-help-inline": "pure-help-inline___2hY6S",
      "pure-form-message-inline": "pure-form-message-inline___3ZYDL",
      "pure-control-group": "pure-control-group___2VCh0",
      "pure-controls": "pure-controls___2mHuT",
      "pure-input-rounded": "pure-input-rounded___2EBlm",
      "pure-group": "pure-group___C4QAv",
      "pure-input-1": "pure-input-1___1YDJv",
      "pure-input-2-3": "pure-input-2-3___3kg78",
      "pure-input-1-2": "pure-input-1-2___19_l4",
      "pure-input-1-3": "pure-input-1-3___112kG",
      "pure-input-1-4": "pure-input-1-4___lS3S-",
      "pure-form-message": "pure-form-message___1oRPy",
      "pure-g": "pure-g___cuPO-",
      "opera-only": "opera-only___gKo-8",
      "pure-u": "pure-u___mK4mg",
      "pure-u-1": "pure-u-1___1DpFa",
      "pure-u-1-1": "pure-u-1-1___LCjwG",
      "pure-u-1-2": "pure-u-1-2___3RB6Q",
      "pure-u-1-3": "pure-u-1-3____gWvC",
      "pure-u-2-3": "pure-u-2-3___3F3f8",
      "pure-u-1-4": "pure-u-1-4___244OC",
      "pure-u-3-4": "pure-u-3-4___3PI0h",
      "pure-u-1-5": "pure-u-1-5___2KPQw",
      "pure-u-2-5": "pure-u-2-5___2i9bc",
      "pure-u-3-5": "pure-u-3-5___1fpYm",
      "pure-u-4-5": "pure-u-4-5___DDu7m",
      "pure-u-5-5": "pure-u-5-5___2dyb4",
      "pure-u-1-6": "pure-u-1-6___1Qy8n",
      "pure-u-5-6": "pure-u-5-6___1oH7O",
      "pure-u-1-8": "pure-u-1-8___6_j23",
      "pure-u-3-8": "pure-u-3-8___24cWX",
      "pure-u-5-8": "pure-u-5-8___3PQ6U",
      "pure-u-7-8": "pure-u-7-8___UXHDa",
      "pure-u-1-12": "pure-u-1-12___21UtJ",
      "pure-u-5-12": "pure-u-5-12___eAp8S",
      "pure-u-7-12": "pure-u-7-12___2rg2s",
      "pure-u-11-12": "pure-u-11-12___1bkku",
      "pure-u-1-24": "pure-u-1-24___1eZ3Q",
      "pure-u-2-24": "pure-u-2-24___1psUa",
      "pure-u-3-24": "pure-u-3-24___1UTt8",
      "pure-u-4-24": "pure-u-4-24___1OPDf",
      "pure-u-5-24": "pure-u-5-24___3B01z",
      "pure-u-6-24": "pure-u-6-24___22hFg",
      "pure-u-7-24": "pure-u-7-24___10pKf",
      "pure-u-8-24": "pure-u-8-24___2UYlA",
      "pure-u-9-24": "pure-u-9-24___1im9h",
      "pure-u-10-24": "pure-u-10-24___3JxRN",
      "pure-u-11-24": "pure-u-11-24___3nv_m",
      "pure-u-12-24": "pure-u-12-24___l7awf",
      "pure-u-13-24": "pure-u-13-24___3njAa",
      "pure-u-14-24": "pure-u-14-24___3eKgk",
      "pure-u-15-24": "pure-u-15-24___2Q6-w",
      "pure-u-16-24": "pure-u-16-24___evPKS",
      "pure-u-17-24": "pure-u-17-24___uXT3G",
      "pure-u-18-24": "pure-u-18-24___Wjp43",
      "pure-u-19-24": "pure-u-19-24___1O8Tz",
      "pure-u-20-24": "pure-u-20-24___2aUrn",
      "pure-u-21-24": "pure-u-21-24___960Z1",
      "pure-u-22-24": "pure-u-22-24___3CJHf",
      "pure-u-23-24": "pure-u-23-24___3U-Ct",
      "pure-u-24-24": "pure-u-24-24___3ul7w",
      "pure-u-sm-1": "pure-u-sm-1___1B3IV",
      "pure-u-sm-1-1": "pure-u-sm-1-1___OTUEu",
      "pure-u-sm-1-2": "pure-u-sm-1-2___1ymdX",
      "pure-u-sm-1-3": "pure-u-sm-1-3___nV6CL",
      "pure-u-sm-2-3": "pure-u-sm-2-3___1Eh-n",
      "pure-u-sm-1-4": "pure-u-sm-1-4___2LyAm",
      "pure-u-sm-3-4": "pure-u-sm-3-4___6lgJa",
      "pure-u-sm-1-5": "pure-u-sm-1-5___1YIKp",
      "pure-u-sm-2-5": "pure-u-sm-2-5___4tmVQ",
      "pure-u-sm-3-5": "pure-u-sm-3-5___SzYU6",
      "pure-u-sm-4-5": "pure-u-sm-4-5___3pfwK",
      "pure-u-sm-5-5": "pure-u-sm-5-5___2_EfT",
      "pure-u-sm-1-6": "pure-u-sm-1-6___3Q5os",
      "pure-u-sm-5-6": "pure-u-sm-5-6___34MRf",
      "pure-u-sm-1-8": "pure-u-sm-1-8___1jUol",
      "pure-u-sm-3-8": "pure-u-sm-3-8___QlP8C",
      "pure-u-sm-5-8": "pure-u-sm-5-8___1JikJ",
      "pure-u-sm-7-8": "pure-u-sm-7-8___1bw2B",
      "pure-u-sm-1-12": "pure-u-sm-1-12___1L4hG",
      "pure-u-sm-5-12": "pure-u-sm-5-12___2D0lR",
      "pure-u-sm-7-12": "pure-u-sm-7-12___mZTvb",
      "pure-u-sm-11-12": "pure-u-sm-11-12___3tktJ",
      "pure-u-sm-1-24": "pure-u-sm-1-24___2Naky",
      "pure-u-sm-2-24": "pure-u-sm-2-24___1sJE1",
      "pure-u-sm-3-24": "pure-u-sm-3-24___2GWe4",
      "pure-u-sm-4-24": "pure-u-sm-4-24___M65Rd",
      "pure-u-sm-5-24": "pure-u-sm-5-24___2_9_4",
      "pure-u-sm-6-24": "pure-u-sm-6-24___1uv9V",
      "pure-u-sm-7-24": "pure-u-sm-7-24___CLXNT",
      "pure-u-sm-8-24": "pure-u-sm-8-24___1LfGe",
      "pure-u-sm-9-24": "pure-u-sm-9-24___1XB23",
      "pure-u-sm-10-24": "pure-u-sm-10-24___19NNt",
      "pure-u-sm-11-24": "pure-u-sm-11-24___1-CDa",
      "pure-u-sm-12-24": "pure-u-sm-12-24___tRR8D",
      "pure-u-sm-13-24": "pure-u-sm-13-24___ppYsL",
      "pure-u-sm-14-24": "pure-u-sm-14-24___1RKVR",
      "pure-u-sm-15-24": "pure-u-sm-15-24___zOq6q",
      "pure-u-sm-16-24": "pure-u-sm-16-24___1UGN0",
      "pure-u-sm-17-24": "pure-u-sm-17-24___cY2jy",
      "pure-u-sm-18-24": "pure-u-sm-18-24___HR77c",
      "pure-u-sm-19-24": "pure-u-sm-19-24___3XYNF",
      "pure-u-sm-20-24": "pure-u-sm-20-24___19B3m",
      "pure-u-sm-21-24": "pure-u-sm-21-24___stRvf",
      "pure-u-sm-22-24": "pure-u-sm-22-24___CDtgp",
      "pure-u-sm-23-24": "pure-u-sm-23-24___kAD91",
      "pure-u-sm-24-24": "pure-u-sm-24-24___2Ek_5",
      "pure-u-md-1": "pure-u-md-1___3dVCT",
      "pure-u-md-1-1": "pure-u-md-1-1___3Sz4Q",
      "pure-u-md-1-2": "pure-u-md-1-2___23nGX",
      "pure-u-md-1-3": "pure-u-md-1-3___3isQJ",
      "pure-u-md-2-3": "pure-u-md-2-3___fNS7-",
      "pure-u-md-1-4": "pure-u-md-1-4___2IP5m",
      "pure-u-md-3-4": "pure-u-md-3-4___3PKf3",
      "pure-u-md-1-5": "pure-u-md-1-5___3x07V",
      "pure-u-md-2-5": "pure-u-md-2-5___L0qGj",
      "pure-u-md-3-5": "pure-u-md-3-5___2m_6a",
      "pure-u-md-4-5": "pure-u-md-4-5___k_jnh",
      "pure-u-md-5-5": "pure-u-md-5-5___Mivsp",
      "pure-u-md-1-6": "pure-u-md-1-6___2sOPz",
      "pure-u-md-5-6": "pure-u-md-5-6___jlvBW",
      "pure-u-md-1-8": "pure-u-md-1-8___2FEqK",
      "pure-u-md-3-8": "pure-u-md-3-8___26nck",
      "pure-u-md-5-8": "pure-u-md-5-8___tCfBB",
      "pure-u-md-7-8": "pure-u-md-7-8___1GYmj",
      "pure-u-md-1-12": "pure-u-md-1-12___2VKNY",
      "pure-u-md-5-12": "pure-u-md-5-12___1_Tcq",
      "pure-u-md-7-12": "pure-u-md-7-12___bZ0cg",
      "pure-u-md-11-12": "pure-u-md-11-12___3DRFf",
      "pure-u-md-1-24": "pure-u-md-1-24___1SQeq",
      "pure-u-md-2-24": "pure-u-md-2-24___1v6n-",
      "pure-u-md-3-24": "pure-u-md-3-24___2funD",
      "pure-u-md-4-24": "pure-u-md-4-24___2ObPr",
      "pure-u-md-5-24": "pure-u-md-5-24___1lymr",
      "pure-u-md-6-24": "pure-u-md-6-24___ayoNL",
      "pure-u-md-7-24": "pure-u-md-7-24___2911j",
      "pure-u-md-8-24": "pure-u-md-8-24___24Tu8",
      "pure-u-md-9-24": "pure-u-md-9-24___FKGVl",
      "pure-u-md-10-24": "pure-u-md-10-24___1R-EA",
      "pure-u-md-11-24": "pure-u-md-11-24___sCit3",
      "pure-u-md-12-24": "pure-u-md-12-24___1VJ33",
      "pure-u-md-13-24": "pure-u-md-13-24___1YpGS",
      "pure-u-md-14-24": "pure-u-md-14-24___24MI-",
      "pure-u-md-15-24": "pure-u-md-15-24___XK9YZ",
      "pure-u-md-16-24": "pure-u-md-16-24___h7bi7",
      "pure-u-md-17-24": "pure-u-md-17-24___1BQlz",
      "pure-u-md-18-24": "pure-u-md-18-24___qPpsj",
      "pure-u-md-19-24": "pure-u-md-19-24___3U4qd",
      "pure-u-md-20-24": "pure-u-md-20-24___16YzM",
      "pure-u-md-21-24": "pure-u-md-21-24___2R23K",
      "pure-u-md-22-24": "pure-u-md-22-24___3U4rX",
      "pure-u-md-23-24": "pure-u-md-23-24___1xpJv",
      "pure-u-md-24-24": "pure-u-md-24-24___3QXva",
      "pure-u-lg-1": "pure-u-lg-1___zQ_-B",
      "pure-u-lg-1-1": "pure-u-lg-1-1___kTW-W",
      "pure-u-lg-1-2": "pure-u-lg-1-2___3ENfC",
      "pure-u-lg-1-3": "pure-u-lg-1-3___3sDbD",
      "pure-u-lg-2-3": "pure-u-lg-2-3___1FGAd",
      "pure-u-lg-1-4": "pure-u-lg-1-4___1DOWR",
      "pure-u-lg-3-4": "pure-u-lg-3-4___3DrOY",
      "pure-u-lg-1-5": "pure-u-lg-1-5___2SW95",
      "pure-u-lg-2-5": "pure-u-lg-2-5___fLdJT",
      "pure-u-lg-3-5": "pure-u-lg-3-5___1j3Wb",
      "pure-u-lg-4-5": "pure-u-lg-4-5___19afB",
      "pure-u-lg-5-5": "pure-u-lg-5-5___20zNF",
      "pure-u-lg-1-6": "pure-u-lg-1-6___2mOwx",
      "pure-u-lg-5-6": "pure-u-lg-5-6___29kJu",
      "pure-u-lg-1-8": "pure-u-lg-1-8___21w_-",
      "pure-u-lg-3-8": "pure-u-lg-3-8___1aG4Y",
      "pure-u-lg-5-8": "pure-u-lg-5-8___35iaO",
      "pure-u-lg-7-8": "pure-u-lg-7-8___3yO_Z",
      "pure-u-lg-1-12": "pure-u-lg-1-12___1jn4I",
      "pure-u-lg-5-12": "pure-u-lg-5-12___24LcK",
      "pure-u-lg-7-12": "pure-u-lg-7-12___1O6CJ",
      "pure-u-lg-11-12": "pure-u-lg-11-12___12S92",
      "pure-u-lg-1-24": "pure-u-lg-1-24___Cc2gE",
      "pure-u-lg-2-24": "pure-u-lg-2-24___resOn",
      "pure-u-lg-3-24": "pure-u-lg-3-24___1uqQh",
      "pure-u-lg-4-24": "pure-u-lg-4-24___2MzGX",
      "pure-u-lg-5-24": "pure-u-lg-5-24___KMis0",
      "pure-u-lg-6-24": "pure-u-lg-6-24___37G0z",
      "pure-u-lg-7-24": "pure-u-lg-7-24___273qE",
      "pure-u-lg-8-24": "pure-u-lg-8-24___5n98D",
      "pure-u-lg-9-24": "pure-u-lg-9-24___Us8CW",
      "pure-u-lg-10-24": "pure-u-lg-10-24___2Aeb-",
      "pure-u-lg-11-24": "pure-u-lg-11-24___2ZqFc",
      "pure-u-lg-12-24": "pure-u-lg-12-24___2vR6r",
      "pure-u-lg-13-24": "pure-u-lg-13-24___3e7Ag",
      "pure-u-lg-14-24": "pure-u-lg-14-24___31Mbe",
      "pure-u-lg-15-24": "pure-u-lg-15-24___R3Oz0",
      "pure-u-lg-16-24": "pure-u-lg-16-24___1-AXm",
      "pure-u-lg-17-24": "pure-u-lg-17-24___2tmUY",
      "pure-u-lg-18-24": "pure-u-lg-18-24___1GX1k",
      "pure-u-lg-19-24": "pure-u-lg-19-24___2L1mv",
      "pure-u-lg-20-24": "pure-u-lg-20-24___2i7rg",
      "pure-u-lg-21-24": "pure-u-lg-21-24___1VTEj",
      "pure-u-lg-22-24": "pure-u-lg-22-24___2MIIn",
      "pure-u-lg-23-24": "pure-u-lg-23-24___Tkw-W",
      "pure-u-lg-24-24": "pure-u-lg-24-24___2l2lR",
      "pure-u-xl-1": "pure-u-xl-1___2aAq3",
      "pure-u-xl-1-1": "pure-u-xl-1-1___1EA_i",
      "pure-u-xl-1-2": "pure-u-xl-1-2___CTsCH",
      "pure-u-xl-1-3": "pure-u-xl-1-3___25_Y9",
      "pure-u-xl-2-3": "pure-u-xl-2-3___3XRS7",
      "pure-u-xl-1-4": "pure-u-xl-1-4___zmgdn",
      "pure-u-xl-3-4": "pure-u-xl-3-4___2X4vP",
      "pure-u-xl-1-5": "pure-u-xl-1-5___5UxhG",
      "pure-u-xl-2-5": "pure-u-xl-2-5___3U86m",
      "pure-u-xl-3-5": "pure-u-xl-3-5___2xTrB",
      "pure-u-xl-4-5": "pure-u-xl-4-5___emrb3",
      "pure-u-xl-5-5": "pure-u-xl-5-5___1379z",
      "pure-u-xl-1-6": "pure-u-xl-1-6___2uBAm",
      "pure-u-xl-5-6": "pure-u-xl-5-6___vwUOC",
      "pure-u-xl-1-8": "pure-u-xl-1-8___13n0s",
      "pure-u-xl-3-8": "pure-u-xl-3-8___29I44",
      "pure-u-xl-5-8": "pure-u-xl-5-8___2qHUB",
      "pure-u-xl-7-8": "pure-u-xl-7-8___2xQd5",
      "pure-u-xl-1-12": "pure-u-xl-1-12___1jG8L",
      "pure-u-xl-5-12": "pure-u-xl-5-12___JWAiZ",
      "pure-u-xl-7-12": "pure-u-xl-7-12___1LnnC",
      "pure-u-xl-11-12": "pure-u-xl-11-12___11Jr1",
      "pure-u-xl-1-24": "pure-u-xl-1-24___2DNRX",
      "pure-u-xl-2-24": "pure-u-xl-2-24___G7meH",
      "pure-u-xl-3-24": "pure-u-xl-3-24___2_Q9w",
      "pure-u-xl-4-24": "pure-u-xl-4-24___3lO96",
      "pure-u-xl-5-24": "pure-u-xl-5-24___KrhN0",
      "pure-u-xl-6-24": "pure-u-xl-6-24___3u02K",
      "pure-u-xl-7-24": "pure-u-xl-7-24___2z1eK",
      "pure-u-xl-8-24": "pure-u-xl-8-24___2zQoK",
      "pure-u-xl-9-24": "pure-u-xl-9-24___2-1WG",
      "pure-u-xl-10-24": "pure-u-xl-10-24___L_BGy",
      "pure-u-xl-11-24": "pure-u-xl-11-24___i1yJw",
      "pure-u-xl-12-24": "pure-u-xl-12-24___1jVjC",
      "pure-u-xl-13-24": "pure-u-xl-13-24___3hDop",
      "pure-u-xl-14-24": "pure-u-xl-14-24___3Ks3M",
      "pure-u-xl-15-24": "pure-u-xl-15-24___gfTON",
      "pure-u-xl-16-24": "pure-u-xl-16-24___1Mbox",
      "pure-u-xl-17-24": "pure-u-xl-17-24___Fa0m-",
      "pure-u-xl-18-24": "pure-u-xl-18-24___T_YJS",
      "pure-u-xl-19-24": "pure-u-xl-19-24___3PNyV",
      "pure-u-xl-20-24": "pure-u-xl-20-24___1v6Fb",
      "pure-u-xl-21-24": "pure-u-xl-21-24___2vIff",
      "pure-u-xl-22-24": "pure-u-xl-22-24___29e3H",
      "pure-u-xl-23-24": "pure-u-xl-23-24___1jNyr",
      "pure-u-xl-24-24": "pure-u-xl-24-24___jNkbd",
      "pure-menu": "pure-menu___3p3Ty",
      "pure-menu-fixed": "pure-menu-fixed___2h4TC",
      "pure-menu-list": "pure-menu-list___1vm3c",
      "pure-menu-item": "pure-menu-item___2FzHg",
      "pure-menu-link": "pure-menu-link___1Vm83",
      "pure-menu-heading": "pure-menu-heading___wukla",
      "pure-menu-horizontal": "pure-menu-horizontal___MAitS",
      "pure-menu-separator": "pure-menu-separator___3So_u",
      "pure-menu-children": "pure-menu-children___3hFSs",
      "pure-menu-allow-hover": "pure-menu-allow-hover___Eh3V3",
      "pure-menu-active": "pure-menu-active___3Ky6S",
      "pure-menu-has-children": "pure-menu-has-children___27ZAY",
      "pure-menu-scrollable": "pure-menu-scrollable___2MMOz",
      "pure-menu-disabled": "pure-menu-disabled___3eUvI",
      "pure-menu-selected": "pure-menu-selected___1MKst",
      "pure-table": "pure-table___3ZMPn",
      "pure-table-odd": "pure-table-odd___3hGTc",
      "pure-table-striped": "pure-table-striped___3mrvH",
      "pure-table-bordered": "pure-table-bordered___1nJ1f",
      "pure-table-horizontal": "pure-table-horizontal___2eTbH"
    },
    "./src/components/InfoBar/InfoBar.scss": {
      "infoBar": "infoBar___yu82e",
      "time": "time___2xPrK"
    },
    "./src/components/SurveyForm/SurveyForm.scss": {
      "inputGroup": "inputGroup___2TvEi",
      "flags": "flags___C-VuX",
      "active": "active___2RAG1",
      "dirty": "dirty___1ZXcm",
      "visited": "visited___1YzZB",
      "touched": "touched___2F-qH",
      "radioLabel": "radioLabel___1howg",
      "cog": "cog___xN0Fc"
    },
    "./src/containers/Widgets/Widgets.scss": {
      "widgets": "widgets___2Abvu",
      "refreshBtn": "refreshBtn___2lvZv",
      "idCol": "idCol___Tu_lJ",
      "colorCol": "colorCol___3kCMi",
      "sprocketsCol": "sprocketsCol___23Iqu",
      "ownerCol": "ownerCol___2j3WS",
      "buttonCol": "buttonCol___CkTAH",
      "saving": "saving___sti8b"
    },
    "./src/containers/App/App.scss": {
      "app": "app___2LF5i",
      "brand": "brand___20_t0",
      "appContent": "appContent___3kCD5"
    },
    "./src/containers/Chat/Chat.scss": {
      "chat": "chat___-Slyy"
    },
    "./src/containers/Home/Home.scss": {
      "home": "home___3kGik",
      "masthead": "masthead___3HbLE",
      "logo": "logo___2M5M4",
      "humility": "humility___Tra-R",
      "github": "github___1UyUK",
      "counterContainer": "counterContainer___1vjEZ"
    },
    "./src/containers/Login/Login.scss": {
      "loginPage": "loginPage___9l4N4"
    }
  }
}

@ricardobanegas
Copy link

@davidecantoni sent the right one, ignore my json-dump

@catamphetamine
Copy link
Owner

Okay, so, I guess the cryptic .s file is what you needed.
Now post me the piece of code with the require() that throws the exception

@davidecantoni
Copy link
Author

... react component...
render() {
    const styles = require('purecss-sass');

    return (
      <div className={styles['pure-g']}>
...

@catamphetamine
Copy link
Owner

Okay, so, first of all, the require('purecss-sass') statement doesn't contain a file extension so it's ignored by webpack-isomorphic-tools and therefore it's not found later.
So that's the first issue.

I'm not sure which require() call triggered the inclusion of the cryptic .s file though.
If that file is what you need then you should check the naming function of the style_modules asset type:
Debug it a bit with log.info to see what is module.name (or m.name) and I guess the reason is that this particular file should be treated differently in the naming function .

@dtothefp
Copy link

@davidecantoni I don't think this type of require for sass will work for your usecase. First of all, @halt-hammerzeit is correct, adding purecss-sass in your entry bundle is not the right way to go for what you are trying to do. If you were doing that and using the extract text plugin, webpack will just create a bundle for pure sass, with the name of whatever you name it in the extract text plugin. If you are using the dev-middleware/hot-middleware, I'm pretty sure the extract text plugin won't work so all your sass will be injected into your main.js bundle which kinda sucks because you will probably get a pretty good "flicker" in dev. Also, if you try to

import styles from 'purecss-sass';

<SomComp className={styles.whatevs} />

and omit purecss-sass from your entry bundle, this will not smartly bundle just the scss you need, but will instead bundle it all, and hash all your class names. My alternative approach which I don't love it to have two webpack tasks, one to bundle JS and one to bundle global SCSS
https://github.com/dtothefp/isomorphic-demo/blob/master/gulp/tasks/webpack/index.js#L90

if (isMainTask) {
  const serverOptions = {
    contentBase: `http://${devHost}:${expressPort}`,
    quiet: true,
    noInfo: true,
    hot: true,
    inline: true,
    lazy: false,
    publicPath,
    headers: {'Access-Control-Allow-Origin': '*'},
    stats: {colors: true}
  };

  app.use(require('webpack-dev-middleware')(compiler, serverOptions));
  app.use(require('webpack-hot-middleware')(compiler));

} else {
  //webpackConfig.entry =  ['global.js'] where => `import 'purecss-sass' => inside global.js
  compiler.watch({
    aggregateTimeout: 300,
    poll: true
  }, logger);
}

when I tried to do above instead with one task where main.js imports 'purecss-sass' webpack-isomorphic-tools freaked out about this "global" sass bundle, but I didn't take time to investigate how to solve the problem. If anyone has better suggestions for this problem I'd love to figure it out.

@catamphetamine
Copy link
Owner

@dtothefp I have flicker in dev which is about a second: a bit annoying but I guess it's inevitable because all the styles are added with style-loader which uses javascript only.
As for Extract Text Plugin - I guess it won't hot reload.

I didn't understand the ideas you were trying to communicate in your comment but I'm guessing that I don't need to and that i'm not the target.

@dtothefp
Copy link

@halt-hammerzeit yeh I do the 2 tasks and just reload with a combo of the compiler.watch and a reload tool such as browser-sync. Sorry if it's a bit off topic, yeh you're not the target, just wanted to show my scss compilation workflow and potentially come up with a better solution.

@catamphetamine
Copy link
Owner

@dtothefp It's always interesting to see alternative solutions from other people so it's not off topic, besides it has a purecss-sass keyword in it.

@nicolascava
Copy link

I have the same problem with my React stack but with the apple-touch-icon, which its required in the root component.
My workaround is to require the apple-touch-icon in the React router wrapper component (the App component), then export it. Then, in the root component, just import the apple-touch-icon from the App component. It's not clean, but it works.

It seems that webpack-isomorphic-tools doesn't "read" assets from the root component, because this component is not included in the Webpack entries.

@catamphetamine
Copy link
Owner

@nicolascava I can advice you something if you post here the relevant pieces of your code. Currently from your description I can't tell what's going on in your project.

webpack-isomorphic-tools can read anything which can be read from webpack-stats.debug.json.
If it's not in webpack-stats.debug.json, then it's unaccessible.

@catamphetamine
Copy link
Owner

I'm closing it for now since no one provided a sane reason for having access to assets outside of Html component.
By the way, React has context which allows child components to have access to anything that their parent components have access to.

@catamphetamine
Copy link
Owner

@dtothefp I've released webpack-isomorphic-tools v2 today.
It can parse CSS styles more correctly now, and therefore I can manually output a <style/> tag while rendering page on a server to counter that flash (flicker) caused by styles not present.
If anyone here will need help migrating to v2 I can answer your questions here.

@catamphetamine
Copy link
Owner

A thing to note is that now it eval()s webpack module source instead of just extracting the text into a variable.
Therefore, different things like "..." + require("../../submodule") + "..." (e.g. CSS styles including fonts and images as submodules) will work now automatically because it's eval()ed.

@catamphetamine
Copy link
Owner

FYI
I'm posting this in every issue and PR to notify whoever may be interested:
today I've released an alternative helper library called universal-webpack.
It takes a different approach than webpack-ismorphic-tools and instead of hacking Node.js require() calls it just compiles all code with target: 'node' webpack configuration option.
As a result, all Webpack plugins and features are supported.
If you think you might need that here's an example project:
https://github.com/halt-hammerzeit/webpack-react-redux-isomorphic-render-example

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants