Using with Next.js

I’ve attempted to use this project in a fresh Next.js and the various examples that they provide.

However, it is challenging to understand how to properly alias the ~_variables.sass file that this project looks for by default.

Next does not support webpack aliases, and the discussion around that suggests creating a babel alias.

On top of that, setting up Next to be able to handle SASS generation seemed to be quite challenging and I couldn’t find any examples.

Does anyone have an example of a Next.js configuration working for this? If not, I’ll put a question on Stack Overflow.

For reference, I’ve made a clean installation of Next.js and react-bulma-components where you can see that it is unable to locate the ~_variables.sass file. As an experiment, if I create that file in the node_modules/react-bulma-components directory as a test, it does find it, but then fails on SASS compilation.

Here’s a minimal repo to see the problem: https://github.com/stefl/react-bulma-components-next

[couds]

Hi @stefl

If you are still interested. I just released a new version (Still on pre-release) that fix allow this library to work properly with Next.js (commit c77aaf6964d48c2f3cdf0ee31c503d4648f57efd)

Check it out in here

You need to update your sassLoaderOptions to include the path to your _variables.sass file and tell Next to that this library its already transpiled

const withSass = require('@zeit/next-sass')
const withTM = require('next-plugin-transpile-modules');

module.exports = withTM(withSass({
    transpileModules: ['react-bulma-components'],
    sassLoaderOptions: {
        includePaths: ["./src"]
    },
}))

Hope this help, and sorry for the long wait

[alexander-sakal]

Hi @couds I have the same issue.