DEV Community

Discussion on: How to import Sass/SCSS mixins global?

 
jwkicklighter profile image
Jordan Kicklighter

So if a component needs one or more mixins, defined in mixins.scss, I have to import it in the local .scss file of the component right?

I'm sure there is a way to avoid this in the long run, but from my experience this is at least a fairly easy way to get things working.

If I define for example a class in the main.scss file than I can use that class in every component without importing it every time.

To answer this, it's important to consider exactly what's going on mechanically, and how CSS works without even using Sass or any pre-processors. The goal of Sass is to use a language that supports more features than CSS, run that language through a processor, and generate a plain CSS file that can be handed to a browser. A "mixin" is a feature of Sass, there is no concept of it in CSS. So when you use a mixin, the Sass compiler actually has to know about the mixin definition, which means that the compiler needs the code in your file and the mixin code which, in this case, is in a separate file. Because Webpack is responsible for running your Sass through the Sass compiler, it seems that the compiler doesn't have access to the global mixins.scss file while compiling all of the other .scss files.

The other code, such as plain CSS classes, are being compiled in your root scss file and served to the browser. Your components are referencing these classes using class="my-root-class". This is exactly the same as going into the root of your HTML document, creating a <style> tag, and adding some classes there. Any class loaded into the browser is available anywhere on the page because CSS itself is inherently global.

The summary is that mixin problems are an issue with the compilation step (converting Sass to CSS), while using global CSS classes in any component is not related to Sass or the compilation step.

Thread Thread
 
dennisfrijlink profile image
Dennis Frijlink

That makes sense! So if I wanna use the mixins globally I have to configure the webpack right?

Thread Thread
 
jwkicklighter profile image
Jordan Kicklighter

That would be my guess about where the problem lies. If I'm not mistaken, doesn't the Next configuration actually have the global scss file declared somewhere? I believe this is imported into webpack's chain in a way that makes it available to the Sass compiler. So there should be some way to accomplish the same thing outside of Nuxt.

Thread Thread
 
jwkicklighter profile image
Jordan Kicklighter

Here is an answer in Stack Overflow that's discussing this exact problem (except variables instead of mixing) stackoverflow.com/a/35554536

Thread Thread
 
dennisfrijlink profile image
Dennis Frijlink

Alright. I will take a look at the configuration of webpack and I how I can fix the global .scss mixins. Thanks for your help and the explanation of sass + webpack! I will sign you if it works :)

Thread Thread
 
jwkicklighter profile image
Jordan Kicklighter

You bet, good luck!

Thread Thread
 
dennisfrijlink profile image
Dennis Frijlink

Hey Jordan,

First of all. Thanks for your support. After searching and testing I started to use CRACO (Create React App Configuration). CRACO is an easy and comprehensible configuration layer for create-react-app based on the structure of Webpack. It kinds of overwrites the rules of webpack you specify in the craco.config.js file. With the plugin craco-sass-resources-loader I managed to load a global SCSS file called utils.scss:

const sassResourcesLoader = require('craco-sass-resources-loader');

module.exports = {
  mode: "development",
  output: {
    path: __dirname
  },
  plugins: [
    {
      plugin: sassResourcesLoader,
      options: {
        resources: './src/assets/scss/utils.scss',
      },
    },
  ]
};
Enter fullscreen mode Exit fullscreen mode

In the utils.scss I simply import all the main SCSS files I wanna use (think of mixins, breakpoints etc.):

/* import scss utilities */
@import './breakpoints';
@import './mixins';
Enter fullscreen mode Exit fullscreen mode