Repository navigation
Can't use grommet #1639
Description
I want to use grommet in my react app
In order to do that I need to import scss file
import 'grommet/scss/vanilla/index.scss'
(notice that the import is from grommet that is inside node_modules)
without that the package will not work.
because create-react-app does not support it.
I Can't use it.
what can I Do?
Activity
Timer commentedon Feb 24, 2017
Does this help?
https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc
shai32 commentedon Feb 24, 2017
NO, as I wrote, notice that the import is from grommet that is inside node_modules
Timer commentedon Feb 24, 2017
Ah, my apologies. Sorry.
This is not a use case we support, you will either need to eject or precompile grommet before using it.
My best suggestion would be to file an issue with grommet and ask for a vanilla/compiled version (not bundled) (which they should be doing anyway).
gaearon commentedon Feb 24, 2017
Can you not import it from your own SCSS file?
src/index.scss
shai32 commentedon Feb 24, 2017
I can try, but is not an elegant solution
gaearon commentedon Feb 24, 2017
We currently don’t integrate with SCSS natively, and don’t intend to in the close future.
This might not be very elegant but it works.
I would recommend to follow this approach for dependencies that need additional build steps. This way you can also reuse themes across projects, and you don’t have to spend time building SCSS that never changes every time you run the app. Pretty elegant.
And if you don't need a custom theme, you might as well use their CSS directly (and ask them to provide it in case they don’t).
I hope this helps! Let me know if I missed something.
shai32 commentedon Feb 24, 2017
Thanks for the fast reply.
roytz commentedon Feb 24, 2017
That's really frustrating @gaearon...
You built an amazing package but stuff as not enabling the use of scss or eslint-autofix for developers who wish to do so is really disappointing because all it is is a simple configuration you could've allowed and it wouldn't have affected anyone who wouldn't use it.
shai32 commentedon Feb 24, 2017
I did @import "../node_modules/grommet/scss/vanilla/index.scss";
but it is not working
no way to use grommet :(
בבקשה דן 🥇
gaearon commentedon Feb 25, 2017
Sorry, I don’t really know Sass enough to advise you how to fix this. What you describe seems like a general Sass question. I believe I showed you how to create a Sass file. From there, you can consult Sass tutorials and support groups on how to include a third-party Sass file from
node_modules.You can use it just fine. The only difference is I suggest you to use the watcher that comes with it, that’s all. I don’t think that every React app needs a Sass compiler, so it’s not included by default.
I already explained in detail why I’m not adding this: (a) there are known issues causing infinite loops, (b) we don’t support custom ESLint configuration, (c) we’re going to adopt a tool like Prettier in the future, and autofix functionality doesn’t make sense in this case. I’m afraid that just repeating “I need this” in unrelated threads and ignoring everything I said earlier is not a very productive way to make the case for your feature.
Yes, it would affect everyone:
I’m sorry. This project has a well-defined scope, and CSS preprocessors are not a part of it. There are plenty of alternatives (some of them linked from the README) that might fit your use case better. Let’s not turn this issue into an argument about the project scope.
mvanlonden commentedon Mar 25, 2017
Thanks for the advice @gaearon and @tacomanator. Just threw together grommet-css for anyone else with this issue.
add sass example