Tukukkk

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?

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.