Next-plugins: next-sass global color variables, Undefined variable: "$primary"

[StefKors]

I have my next.config.js setup like this:

const withPlugins = require("next-compose-plugins");
const sass = require("@zeit/next-sass");
const path = require("path");

module.exports = withPlugins([
  {
    webpack(config, options) {
      config.resolve.alias['components'] = path.join(__dirname, 'components')
      config.resolve.alias['static'] = path.join(__dirname, 'static')
      config.resolve.alias['images'] = path.join(__dirname, 'assets/images')
      config.resolve.alias['svg'] = path.join(__dirname, 'assets/svg')
      config.resolve.alias['assets'] = path.join(__dirname, 'assets')
      config.resolve.alias['styles'] = path.join(__dirname, 'styles')
      return config
    }
  },
  [
    sass,
    {
      cssModules: true,
      cssLoaderOptions: {
        importLoaders: 1,
        localIdentName: "[local]___[hash:base64:5]"
      }
    }
  ]
]);

and I import a scss file in _app.js. Which makes these styles globally available. However I get errors when I try to set color variable globally and want to use it on a component.

_app.js

(...)
import "styles/application.scss";
(...)

component.js

(...)
import s from "./component.scss";
(...)

component.scss

div {
background: $primary;
}

error:

Undefined variable: "$primary".

[adamjw3]

Did you find a fix for this?

[StefKors]

I haven't found a workaround yet sadly

[royalbhati]

If you guys are still looking for a workaround I have found one using sass-resources-loader

My next.config.js looks like this

const withSass = require("@zeit/next-sass");
const resourcesLoader = {
  loader: "sass-resources-loader",
  options: {
    resources: ["./styles/colors.scss"]
  }
};
module.exports = withSass({
  webpack: (config, options) => {
    config.module.rules.map(rule => {
      if (
        rule.test.source.includes("scss") ||
        rule.test.source.includes("sass")
      ) {
        rule.use.push(resourcesLoader);
      }
    });
    return config;
  }
});

[nachoperassi]

const withSass = require('@zeit/next-sass')
module.exports = withSass({
  // add custom webpack config
  webpack(config, options) {
    // this rule is to add support for global scss variables
    const globalSass = [
      './styles/_variables.scss',
    ];

    config.module.rules.push({
      enforce: 'pre',
      test: /.scss$/,
      loader: 'sass-resources-loader',
      options: {
        resources: globalSass,
      }
    });

    return config;
  }
});

[timneutkens]

Hi, thanks for creating an issue. We currently recommend using https://nextjs.org/docs/basic-features/built-in-css-support as the plugins have been deprecated in favor of the built-in support.