Error compiling NextJS & Sass Global stylesheets when deploying to Vercel

Question

I'm statically generating pages that use components in NextJS. I'm using Bootstrap and SASS with a global styles.scss.

When I try to deploy my app to Vercel from my Github repo, it fails in the compile. The error is sass related, but I can't for the life of me work out what is causing it. None of the errors exist when running locally or when I build it.

When deploying, the error says that it can't an @import file in my global .scss file.

I'm using the latest version of Next.js 9 >.

Deployment error log looks like this :-

21:36:21    Cloning github.com/nigeymc/Portfolio-App-NextJS-Refactor (Branch: master, Commit: baa537e)
21:36:22    Cloning completed in 418ms
21:36:22    Analyzing source code...
21:36:22    Installing build runtime...
21:36:25    Build runtime installed: 2976.247ms
21:36:28    Looking up build cache...
21:36:28    Build cache not found
21:36:29    Installing dependencies...
21:36:29    yarn install v1.22.10
21:36:29    [1/4] Resolving packages...
21:36:30    [2/4] Fetching packages...
21:37:07    info fsevents@2.3.2: The platform "linux" is incompatible with this module.
21:37:07    info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
21:37:07    info fsevents@1.2.13: The platform "linux" is incompatible with this module.
21:37:07    info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
21:37:07    [3/4] Linking dependencies...
21:37:07    warning " > bootstrap@4.6.0" has unmet peer dependency "popper.js@^1.16.1".
21:37:24    [4/4] Building fresh packages...
21:37:36    Done in 66.23s.
21:37:36    Detected Next.js version: 10.0.7
21:37:36    Running "yarn run build"
21:37:36    yarn run v1.22.10
21:37:36    $ next build
21:37:37    info  - Creating an optimized production build...
21:37:37    Attention: Next.js now collects completely anonymous telemetry regarding usage.
21:37:37    This information is used to shape Next.js' roadmap and prioritize features.
21:37:37    You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
21:37:37    https://nextjs.org/telemetry
21:37:59    Failed to compile.
21:37:59    ./styles/styles.scss
21:37:59    SassError: Can't find stylesheet to import.
21:37:59      ╷
21:37:59    2 │ @import "./variables/Colors";
21:37:59      │         ^^^^^^^^^^^^^^^^^^^^
21:37:59      ╵
21:37:59      styles/styles.scss 2:9  root stylesheet
21:37:59    > Build error occurred
21:37:59    Error: > Build failed because of webpack errors
21:37:59        at /vercel/workpath0/node_modules/next/dist/build/index.js:15:918
21:37:59        at async /vercel/workpath0/node_modules/next/dist/build/tracer.js:3:470
21:37:59    error Command failed with exit code 1.
21:37:59    info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
21:37:59    Error: Command "yarn run build" exited with 1
21:38:04    Done with "package.json"

Answer 1

Thanks for replying to your own question @i-am-niall, it was the capitalization that fixed it for me.

Changed:

...
@import '_shared.scss';
@import 'footer.scss';
@import 'forms.scss';
...

To:

...
@import '_shared.scss';
@import 'Footer.scss';
@import 'Forms.scss';
...

And renamed the files of course, and the build was successful.

Answer 2

What worked for me was moving every other file aside from the actual pages away from the pages folder and placing them in the root folder of the project. Only the parent pages should be in the pages folder!

Initially had the following folder structure:

/pages/
/pages/usersComponents
/pages/adminComponents
/pages/otherComponents

Now I have:

/pages:
/usersComponents
/adminComponents
/otherComponents

Note: "styles" imported in the "pages" files was passed to the children components as a prop.

Answer 3

After a lot of refactoring of my global stylesheet, I managed to get my app deployed successfully. For anyone that might be facing similar problems with the latest NextJS and a Sass global stylesheet, here is how I fixed it.

I originally had main stylesheet called styles.scss which looked like this :-

// Import variables
@import "./variables.scss";

// Import Bootstrap
@import "~bootstrap/scss/bootstrap";

// Global CSS
@import "./global.scss";

// Components
@import "./components/component1.scss";
@import "./components/component2.scss";
@import "./components/component3.scss";

// Sections
@import "./sections/homepage-section.scss";
@import "./sections/general-section.scss";

This set up was producing lot's of errors, for some reason that NextJS sass loader couldn't find the imported files. It also didn't like the partials for some reason.

In _app.js I imported both Bootstrap, Normalize and my global stylesheet above - styles.scss.

I have no idea why it doesn't like this, as babel, and the various loaders in my React app had no problem with it.

In the end I had to solve it by doing the following :-

I created a variables.scss which only contained all of my @imports - variables and components.

@import "./spacing.scss";
@import "./colors";
@import "./typography";
@import "~bootstrap/scss/bootstrap";
@import "./homepage-section.scss";
@import "./general-section.scss";
@import "../components/component1.scss";
@import "../components/component2.scss";
@import "../components/component3.scss";

I then had to add the following to the next.config.js

sassOptions: {
        includePaths: [path.join(__dirname, 'styles')],
        prependData: `@import "./variables/_variables.scss";`,
    },

then I removed styles.scss and added Global.scss to _app.js - notice the uppercase 'G'. For some reason it breaks Vercel deployment if it is lowercase.

import 'bootstrap/dist/css/bootstrap.min.css';
import 'normalize.css/normalize.css';
import '../styles/Global.scss';
import { Provider } from 'react-redux';
import { useStore } from '../store/configureStore';

const MyApp = ({ Component, pageProps }) => {
    const store = useStore(pageProps.initialReduxState)

    return (
        <Provider store={store}>
            <Component {...pageProps} />
        </Provider>

    )
}

export { MyApp as default };

My Global.scss contained no @imports just the global styles.

After doing this, the app build was successful and deployment to Vercel was also successful.

Hope this helps someone in a similar jam.