Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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!

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:1
  • Comments:10 (5 by maintainers)

github_iconTop GitHub Comments

JJB1980commented, Feb 17, 2018

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.

rardozcommented, Sep 22, 2017

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"
Read more comments on GitHub >

github_iconTop Results From Across the Web

Gulp SASS - Use @import without compiling scss -> css
Is it possible to use gulp sass (or other gulp plugins) to read a single . scss file with multiple @import statements, and...
Read more >
gulp -cssimport. Parses a CSS file, finds imports, grabs the content of the linked file and replaces the import statement with it.
Read more >
Senior .NET Full Stack Developer Resume Dallas - TX
Extensive experience with Web technologies like ASP. ... technologies like jQuery, Java script, ECMA script(ES6), Type Script, Gulp JS, JSON and Node JS....
Read more >
gulp-sass - node_modules - node-sass
It is recommended that you use includePaths in conjunction with this so that libsass can find files when using the @import directive. importer...
Read more >
Gulp and Webpack: Getting the Best of Both Worlds
I contrasted Webpack with Gulp, a stream processor and taskrunner ... gulp command as an NPM script, which will correctly resolve the path ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found