Create-react-app: Can't use grommet

[shai32]

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?

[Timer]

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]

NO, as I wrote, notice that the import is from grommet that is inside node_modules

[Timer]

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]

NO, as I wrote, notice that the import is from grommet that is inside node_modules

Can you not import it from your own SCSS file?

src/index.scss

@import "../node_modules/grommet/scss/vanilla/index.scss";

[shai32]

I can try, but is not an elegant solution

[gaearon]

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]

Thanks for the fast reply.

[roytz]

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]

I did @import "../node_modules/grommet/scss/vanilla/index.scss";
but it is not working

no way to use grommet :(

בבקשה דן 🥇

[gaearon]

I did @import "../node_modules/grommet/scss/vanilla/index.scss";
but it is not working

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.

not enabling the use of scss

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.

or eslint-autofix

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.

it wouldn't have affected anyone who wouldn't use it

Yes, it would affect everyone:

• Everyone would get heavier dependencies, some of which are native and are known to randomly break on some systems.
• We would get a higher volume of GitHub issues related to those dependencies and systems, and thus have less time to work on features and bugs affecting everything else. The project scope is already pretty large, and adding more non-essential features is not helping.
• You can already do all of that either by running your own watcher, or by creating your own separate packages (e.g. customized grommet or bootstrap) with their own build steps.

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]

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.

Thanks for the advice @gaearon and @tacomanator. Just threw together grommet-css for anyone else with this issue.