-
Notifications
You must be signed in to change notification settings - Fork 2.2k
How to use react-toolbox? #582
Comments
You should just be able to |
@davezuko I tried this but I got a lot of errors (for every component one) example error:
Thanks for your help. Would really appreciate it, if you can try it out. Edit: I also tried another library called react-mdl. But I don't get this to run either. Here is the problem, that the vendor bundle does not pick up the necessary javascript and style file? Where can I specify which js and style files webpack should bundle? |
So I did some digging and the project does a couple of weird things which make it a bit of a hassle:
resolve: {
root: paths.base(config.dir_client),
extensions: ['', '.js', '.jsx', '.scss']
}, Next, they also require CSS modules to be enabled, but we aren't treating 3rd-party packages as CSS module consumers. As such, you'll have to update the loader for CSS modules: // Styles
const cssLoader = !config.compiler_css_modules
? 'css?sourceMap'
: [
'css?modules',
'sourceMap',
'importLoaders=1',
'localIdentName=[name]__[local]___[hash:base64:5]'
].join('&')
webpackConfig.module.loaders.push({
test: /\.scss$/,
include: /(src|react-toolbox)/, // notice this
loaders: [
'style',
cssLoader,
'postcss',
'sass?sourceMap'
]
}) Then, finally, update the global scss loader: // Don't treat global SCSS as modules (except react-toolbox!)
webpackConfig.module.loaders.push({
test: /\.scss$/,
exclude: /(src|react-toolbox)/,
loaders: [
'style',
'css?sourceMap',
'postcss',
'sass?sourceMap'
]
}) |
Just made this even easier with: b0b5e71. You just need to do two things and it should work:
Then, optionally, add it to your |
@davezuko super awesome, it is working! 👍 For the sake of completeness, could you also show how to integrate react-mdl? Edit: wich should cover a lot of other libraries as well |
@ms88privat glad it worked. Going to close this issue for now since the original question has been answered, but will take a look at react-mdl later today. I just started browsing through it and the docs are quite poor, so it may take me a bit longer to figure it out. |
Got it, add the following lines to the top of import 'react-mdl/extra/material.css'
import 'react-mdl/extra/material.js' And then add the
After that, you should be able to just: import Button from 'react-mdl/lib/Button'
// ...
<Button raised primary>foo</Button> |
@davezuko thanks!
This is what I was looking for. ES6 + Webpack is quite different then ES5 and Grunt build tools... |
There are some additional things you'll potentially have to do, e.g. if you use a custom theme file with react-toolbox with First is this:
And you also need to add |
@davezuko I tried the steps provided by you to get it working but unfortunately styles doesn't apply Can you help me out? |
I can't figure out how to get this to work with react-toolbox either. @davezuko's instructions from Feb 21 seem to be outdated. |
Here's a config for getting react-toolbox to work with react-redux-starter-kit: apaatsio@8d152ee |
@apaatsio I followed your change commit and your issue and it works well, thanks! |
@apaatsio it works well with react-toolbox, but I can't import .scss file in component anymore. |
@MichaelIT Please, check out apaatsio@8d5ebb3 I added a simple example for a component with theming. |
I have created a simple minimal repository with react-toolbox just days ago. No Node server installed. https://github.com/junibrosas/react-tyescript-router-redux-toolbox |
@apaatsio @junibrosas thank you all, it work after I remove all node package and run |
@apaatsio your example doesn't have the styles applied. Try changing styles in |
@davezuko This seems to be outdated. I got react-toolbox running with this, but it causes problems with other stylesheets like core.scss, CoreLayout.scss, etc. Only selectors on html tags work, but not on classes. The .core-layout__viewport { padding: 1rem; } is present in the styleshet sent to the browser, but doesnt't get applied. |
Thank you for this starter-kit. The webpack config is pretty huge so I don't really know how to integrate react-toolbox.
Could anyone help me out here?
The text was updated successfully, but these errors were encountered: