linkedin / linkedin/eyeglass

Webpack 1 (react-create-app) + Eyeglass + Sass Loader

Open
#169 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

package:eyeglass
Dominant language
TypeScript
Stars
738
Forks
48
PR merge metrics
No merged PRs in 30d

Description

Hey guys, I've been working on this issue for the better part of a week and am trying to see if anyone else has experience getting Eyeglass to work with Webpack 1 and Sass Loader. Based on my research on this issue, I came across https://github.com/sass-eyeglass/eyeglass/issues/153 and https://github.com/material-components/material-components-web/issues/351, which led me to think that this _should_ be the set up:

```
...
sassLoader: eyeglass({
includePaths: glob.sync('node_modules/@XXXXXXXX/*').map((d) => path.join(__dirname, d)),
eyeglass: {
// eyeglass options
root: paths.scssPath,
file: path.join(paths.scssPath, 'app.scss'),
sassDir: paths.scssPath,
}
}),
...
```
Unfortunately, when i run `npm start`, I get a `Failed to compile` error:
```
Failed to compile.

Error in ./src/scss/app.scss
Module build failed:
@import "@eg-modules-header";
^
File to import not found or unreadable: @eg-modules-header.
Parent style sheet: stdin
in /Users/xxxxx/workspace/xxxxxx/test/src/scss/app.scss (line 82, column 1)
@ ./src/scss/app.scss 4:14-180 13:2-17:4 14:20-186
```
Can anyone share a working example of Eyeglass + Webpack + Sass-loader?

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the sassLoader configuration and src/scss/app.scss, then reproduce the failure with npm start. Check the referenced Eyeglass and material-components issues for the Webpack 1 integration context. Done means a working Eyeglass, Webpack, and Sass Loader setup that resolves @eg-modules-header without the compile error.

Written by the indexing model from the issue text.

Assessment

Tech stack
sass, webpack
Domain
build-system, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.