CODEWITHSUNDEEP
webpacksassnext.js
Antfish
Antfish

Reputation: 1493

How to make SASS available to custom Webpack implementation in NextJS?

I'm trying to use the sass-resources-loader to have my SASS variables available in all my SASS files but it doesn't look like SASS is available to this loader.

The next-sass package docs suggest you can wrap the config object in order to make sass available to it. e.g withSass({configHere}).

However the error I get suggests that the SASS loader isn't available.

Config:

const path = require('path');
const withSass = require('
@zeit
/next-sass');

const globalSass = [
  path.join(process.cwd(), 'stylesheets/variables/_variables.scss'),
  path.join(process.cwd(), 'stylesheets/tools/_tools.scss')
]

module.exports = withSass({
  webpack: (config, { buildId, dev, isServer, defaultLoaders }) => {
    // Perform customizations to webpack config
    // Important: return the modified config
    config.module.rules.push({
      loader: "sass-resources-loader",
      options: {
        resources: globalSass
      }
    })

    return config
  }
})

I am getting this error:

Module parse failed: Unexpected token (1:15)
You may need an appropriate loader to handle this file type.
> $font-size-base: 14px;
| $font-size-large: ceil(($font-size-base * 1.25));
| $font-size-small: ceil(($font-size-base * 0.85));

@multi ./node_modules/next/dist/client/next-dev

Where $font-size-base etc. are in the variables SASS file processed by "sass-resources-loader".

Could anyone suggest what I might be doing wrong here?

Upvotes: 1

Views: 1979

Answers (1)

Steve Holgado
Steve Holgado

Reputation: 12071

I have a couple of suggestions.

You don’t have a test for your rule:

test: /\.scss$/

You’ll probably also need to force the sass-resources-loader to run first, before the other loaders, by using:

enforce: 'pre'

So, try this config:

module.exports = withSass({
  webpack: (config, { buildId, dev, isServer, defaultLoaders }) => {
    config.module.rules.push({
      enforce: "pre",
      test: /\.scss$/,
      loader: "sass-resources-loader",
      options: {
        resources: globalSass
      }
    })

    return config
  }
})

Hopefully this will work for you.

Upvotes: 2

Related Questions