Using Grommet without Gulp via NPM results in problems resolving SCSS imports

Is there any existing documentation on using Grommet without Gulp, and without using the grommet init command or grommet-toolbox? The UI components are great, but I’m integrating this into an existing project and don’t want to add gulp and all of the other tooling to my existing webpack build system.

After simply installing Grommet via npm i -S grommet and rendering the App component, the markup is rendered to the DOM correctly. However, none of the styling is working. When building, I’m getting errors from Grommet’s _settings.scss file when including the InuitCSS files, as below:

@import "inuit-defaults/settings.defaults";
^
File to import not found or unreadable: inuit-defaults/settings.defaults
Parent style sheet: /Users/my-username/my-app/node_modules/grommet/scss/grommet-core/_settings.scss

Even after adding the InuitCSS dependencies to my package.json file, I’m not able to resolve those properly because the @import statements in Grommet’s SCSS files do not use ~ to indicate they should be loaded from node_modules. I could potentially just copy the SCSS files into my own /lib directory and modify those files to import from the correct location, but that breaks the easy upgrade path that npm provides, and requires more maintenance.

Do you have any recommendations on how I can fix the InuitCSS issues, or any other docs to help me integrate Grommet successfully? If I can contribute some code to make this work properly, I’m happy to help, but would appreciate some guidance 😃

Thank you so much!

[JJB1980]

Having the same issue adding grommet to my project from scratch, webpack is unable to locate inuit files as they don’t have ~ prepended. fixed by going into grommet and modifying the imports, no other suggestions have worked. this obviously isn’t an acceptable resolution.

[rardoz]

I was able to fix this by moving over the stuff in grommet’s index.scss to my own sass file to get it working with webpacks sass-loader and sass-resources-loader. This is what my grommet.sass file looks like. The problem was sass-loader requires ~ in front of node_module imports. Grommet doesn’t have that type of setup.

@import "~grommet/scss/grommet-core/settings"

// Generic
@import "~inuit-normalize/generic.normalize"
@import "~inuit-reset/generic.reset"
@import "~inuit-shared/generic.shared"

// Base
@import "~grommet/scss/grommet-core/base"

// Objects
@import "~grommet/scss/grommet-core/objects"