Next.js: Built-in Sass Support for Global Stylesheets (Variables/Mixins.scss)

[kevinkashou]

Bug report

Describe the bug

I have included my global.scss, mixins.scss and variables.scss to the _app.js file like mentioned in the documentations https://nextjs.org/blog/next-9-2#built-in-css-support-for-global-stylesheets but the problem I am facing is that I can leverage of the mixins or variables globally from the different components (*.module.scss) files. How can I make that happen?

I have removed the @zeit/next-css and @zeit/next-scss per the documentations to just use the built in scss support.

This is hte error I am getting:

[ error ] ./styles/_global.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??__nextjs_postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./styles/_global.scss)
SassError: no mixin named font-size
on line 153 of /Users/{PATH TO}/Portfolio/styles/_global.scss

@include font-size(18);

Let me know if I am missing something else?

Thanks

[ivoilic]

You need to import your mixins, variables, etc in each *.module.scss file. I have global.scss file I use that includes all that and I import it at the top of every module file. You can use this code in your Next's config so you don't have to use relative paths:

module.exports = withSass({ cssModules: true, sassLoaderOptions: { includePaths: ['./directory-your-global-styles-are-in'] } });

PS The new version of Next that just dropped includes scss support without the plugin. It also changes this!

[kevinkashou]

I am using the new next js with the scss feature! But the variables and Mixins I don’t want to import it in each components. I want to use it globally so I can use the variables/functions throughout the project.

I don’t want to use the next/scss since it is not needed anymore.

Thanks,

Kevin

[OscarBarrett]

You can make your variables and mixins available globally by using the prependData option from sass-loader. Unfortunately with the new built in support you can't currently customise the options easily.

See this comment for a workaround.

[kevinkashou]

@OscarBarrett - So I have to do it that way regardless?

[kevinkashou]

I ended up doing this:

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

module.exports = withSass({
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: '[local]___[hash:base64:5]',
  },
  webpack(config, options) {
    config.module.rules.push(
      {
        test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 100000,
          },
        },
      },
      {
        enforce: 'pre',
        test: /.scss$/,
        loader: 'sass-resources-loader',
        options: {
          resources: ['./styles/_mixins.scss', './styles/_variables.scss'],
        },
      },
    );

    return config;
  },
});

To allow global variables and mixins. Let me know what you guys think of this?

Thank!

[timneutkens]

Duplicate of https://github.com/zeit/next.js/issues/10339

[kevinkashou]

Duplicate of #10339

@timneutkens - Is it really a duplicate though? Because I am implementing a feature that didn't exist during the time of the other ticket that is duplicate.

[timneutkens]

It did exist at that time, it was just under an experimental flag and the person was using it

[yomed]

@timneutkens Thank you for addressing the custom options in #11063. It looks like the prependData case mentioned here might need to be addressed separately, since prependData is a sibling to sassOptions. I only noticed through poking around on this line added in your PR:
https://github.com/zeit/next.js/blob/9730be67340d16e2e0c4a936c483326c48be7b1a/packages/next/build/webpack/config/blocks/css/index.ts#L46

And got:

These properties are valid: object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }

[redaben]

@kkashou Did you find a solution ?

[kevinkashou]

@redaben - I used this example to work what I needed done https://github.com/zeit/next.js/issues/10339#issuecomment-588437661

[vitaliemiron]

Same problem with next 9.3

[abetoots]

@timneutkens @yomed sorry im new to next but how exactly do I use the SCSS options mentioned in #11063 ?

[yomed]

@abetoots You would put the options in next.config.js, like this:

module.exports = {
  experimental: {
    sassOptions: {
      ...
    },
  },
};

Note that prependData does not work here, like I mentioned in https://github.com/zeit/next.js/issues/10912#issuecomment-600415598

[abetoots]

@yomed So sassOptions doesn't expect the same options you would pass in node-sass? I mean prependData is not an option in node-sass or sass

[yomed]

@abetoots sassOptions gets mapped to passing that exact field to sass-loader -- you can see the options list here: https://webpack.js.org/loaders/sass-loader/#options (scroll to the options table). Currently Next.js only supports sassOptions, but not the sibling option prependData.

[abetoots]

@yomed Ah I see. I seem to have missed:

ℹ️ Options such as data and file are unavailable and will be ignored.

since I used data not prependData in my gatsby config. Thanks for the clarification.
Unfortunately, we're still stuck with the problem though feels bad

[yomed]

Should be fixed via https://github.com/zeit/next.js/pull/12277