Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nextjs app doesn't see sass package installed its directory when run from keystone root #3256

Closed
Bravo555 opened this issue Jul 17, 2020 · 0 comments

Comments

@Bravo555
Copy link
Contributor

Bravo555 commented Jul 17, 2020

Bug report

Describe the bug

I have a Keystone App that contains NextApp, located in root directory of my project. For the frontend I'm using Bulma CSS framework, thus I had to override global CSS in custom App.

The difference is that instead of importing ../styles.css I import ../styles.scss. My styles.scss looks like this:

@import "../node_modules/bulma/bulma.sass";

When running the npm run dev I receive the following error:

...
✔ Initialised Keystone instance
error - ./styles/styles.scss
To use Next.js' built-in Sass support, you first need to install `sass`.
Run `npm i sass` or `yarn add sass` inside your workspace.
...

After that, I installed package sass in the directory of my frontend, that is in app/package.json.
But I'm still getting the same error. When I ran npm run dev in app, it worked.

So I think the issue is that when Keystone launches Nextjs App, it points to wrong node_modules (points to node_modules, should point to app/node_modules).

Of course I could also just install sass in project root, however I don't want to install packages twice every time my Nextjs app needs one (I suspect that's the case with not only sass package but in general for other packages too). Also, I wouldn't want to keep frontend dependencies in keystone root directory, which should only contain dependencies for backend stuff.

To Reproduce

Steps to reproduce the behaviour. Please provide code snippets or a repository:

  1. Create a keystone project from a starter template, and then add Nextjs app.
  2. Initialise Nextjs app: npx create-next-app (project name: app).
  3. Install frontend dependencies cd app && npm install --save bulma sass
  4. Create app/pages/_app.js with following contents:
import '../styles/styles.sass';

export default function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />
}
  1. Create app/styles/styles.sass with following contents:
@import "../node_modules/bulma/bulma.sass"
  1. Run the app from project root: cd ../ && npm run dev
  2. The error informing that sass package has to be installed is printed.

Expected behaviour

The error should not be printed. Package is installed in app/node_modules after all.

System information

  • OS: Manjaro Linux
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant