Importing sass variables from abstract file (old solution no longer work! Please help.

[Nazrinn]

Hi there,

So, I've been trying for a few days to make this work, but for some reason I'm not getting any luck. I've been trying to use sass-loader's additionalData, sass's includePaths, and sass-resource-loader to load a global site variable to all my scss files, but none of it seems to work.

If I try to use any of these solutions, I get the following errors on build:

ERROR in ./src/_global/_main.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Undefined variable.
   ╷
12 │   line-height: $global__line-height;
   │                ^^^^^^^^^^^^^^^^^^^^
   ╵
  src\_global\typography.scss 12:16  @use
  src\_global\_main.scss 3:1         root stylesheet
    at tryRunOrWebpackError (C:\xampp\htdocs\dev\transition65\wp-content\themes\theme-dev\node_modules\webpack\lib\HookWebpackError.js:116:9)
...
-- inner error --
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Undefined variable.
   ╷
12 │   line-height: $global__line-height;
   │                ^^^^^^^^^^^^^^^^^^^^
   ╵
  src\_global\typography.scss 12:16  @use
  src\_global\_main.scss 3:1         root stylesheet
    at Object.<anonymous> (C:\xampp\htdocs\dev\transition65\wp-content\themes\theme-dev\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[3].use[1]!C:\xampp\htdocs\dev\transition65\wp-content\themes\theme-dev\node_modules\postcss-loader\dist\cjs.js??ruleSet[1].rules[3].use[2]!C:\xampp\htdocs\dev\transition65\wp-content\themes\theme-dev\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[3].use[3]!C:\xampp\htdocs\dev\transition65\wp-content\themes\theme-dev\src\_global\_main.scss:1:7)
    at C:\xampp\htdocs\dev\transition65\wp-content\themes\theme-dev\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:596:10
    ...

Generated code for C:\xampp\htdocs\dev\transition65\wp-content\themes\theme-dev\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[3].use[1]!C:\xampp\htdocs\dev\transition65\wp-content\themes\theme-dev\node_modules\postcss-loader\dist\cjs.js??ruleSet[1].rules[3].use[2]!C:\xampp\htdocs\dev\transition65\wp-content\themes\theme-dev\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[3].use[3]!C:\xampp\htdocs\dev\transition65\wp-content\themes\theme-dev\src\_global\_main.scss
1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nUndefined variable.\n\u001b[34m   ╷\u001b[0m\n\u001b[34m12 │\u001b[0m   line-height: \u001b[31m$global__line-height\u001b[0m;\r\n\u001b[34m   │\u001b[0m \u001b[31m               ^^^^^^^^^^^^^^^^^^^^\u001b[0m\n\u001b[34m   ╵\u001b[0m\n  src\\_global\\typography.scss 12:16  @use\n  src\\_global\\_main.scss 3:1         root stylesheet");

webpack 5.105.4 compiled with 2 errors in 2101 ms

Step to reproduce and config

Steps:

1. Reproduce the file structure below:

.
└── theme-dev/
    ├── src/
    │   ├── _abstract/
    │   │   └── _main.scss < Where $global__line-height is defined
    │   └── _global/
    │       ├── _main.scss
    │       ├── layout.scss
    │       └── typography.scss < Where I am using $global__line-height
    ├── package.json
    ├── webpack.common.js
    ├── webpack.dev.js
    └── webpack.prod.js

2. File content should be as such:
   package.json

{
  "name": "transition-65-wp-theme",
  "version": "1.0.0",
  "description": "A base WordPress Webpack setup for local development.",
  "main": "index.js",
  "scripts": {
    "test": "NPM is working as intended.",
    "dev": "webpack --watch --mode development --config webpack.dev.js",
    "build": "webpack --mode production --config webpack.prod.js"
  },
  "author": "Hélène Desaulniers",
  "license": "ISC",
  "browserslist": [
    "last 2 version",
    "> 1%",
    "not dead"
  ],
  "devDependencies": {
    "@babel/core": "^7.19.1",
    "@babel/preset-env": "^7.19.1",
    "autoprefixer": "^10.4.11",
    "babel-loader": "^10.1.1",
    "browser-sync": "^3.0.4",
    "browser-sync-webpack-plugin": "^2.3.0",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^7.1.1",
    "css-minimizer-webpack-plugin": "^8.0.0",
    "mini-css-extract-plugin": "^2.6.1",
    "postcss": "^8.4.16",
    "postcss-loader": "^8.1.1",
    "sass": "^1.76.0",
    "sass-loader": "^16.0.7",
    "svelte": "^5.55.0",
    "svelte-loader": "^3.2.4",
    "svelte-preprocess": "^6.0.3",
    "webpack": "^5.74.0",
    "webpack-cli": "^7.0.2",
    "webpack-dev-server": "^5.0.4",
    "webpack-merge": "^6.0.1",
    "webpack-remove-empty-scripts": "^1.0.0"
  },
  "dependencies": {
    "core-js": "^3.25.2",
    "npm-check-updates": "^19.6.5",
    "sass-embedded": "^1.98.0",
    "sass-resources-loader": "^2.2.5"
  }
}

webpack.common.js

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');

module.exports = {
  entry: {
    'global': './src/_global/_main.scss',
    //^ Final file name (or path!). ^ Where the file is from
  },
  resolve: {
    extensions: ['.mjs', '.js', '.svelte',],
    mainFields: ['svelte', 'browser'],
    conditionNames: ['svelte', 'browser']
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, '../hello-elementor-child/assets/js/'),
  },
  performance: {
    hints: false
  },
  module: {
    rules: [
      {
        test: /\.(svelte|svelte\.js)$/,
        use: {
          loader: 'svelte-loader',
          options: {
            emitCss: true,
            preprocess: require('svelte-preprocess')({
              //options
            })
          }
        }
      },
      {
        test: /node_modules\/svelte\/.*\.mjs$/,
        resolve: {
          fullySpecified: false
        }
      },
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.(sa|sc|c)ss$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /node_modules/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              url: false,
              sourceMap: true,
            }
          },
          {
            loader: "postcss-loader",
            options: {
              sourceMap: true,
              postcssOptions: {
                plugins: [
                  ['autoprefixer']
                ]
              }
            }
          },
          {
            loader: 'sass-loader',
            options: {
              api: "modern-compiler",
              sourceMap: true,
              implementation: require('sass'),
              additionalData: `@use "C:/xampp/htdocs/dev/transition65/wp-content/themes/theme-dev/src/_abstract/_main.scss" as *;` //< does not work. Using anything but an absolute path results in a different error. 
              sassOptions: {
                includePaths: [path.resolve(__dirname, 'src', '_abstracts', '_main.scss')]
              } //< does not work.
            }
          },
          // {
          //   loader: 'sass-resources-loader',
          //   options: {
          //     resources: './src/_abstract/_main.scss',  //< does not work.
          //     hoistUseStatements: true
          //   }
          // }
        ]
      },
      {
        test: /\.css$/, //processes the css in Svelte files
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              url: false,
              sourceMap: true
            }
          }
        ]
      },
    ]
  },
  plugins: [
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: [
        path.resolve(__dirname, '../hello-elementor-child/assets/css'),
        path.resolve(__dirname, '../hello-elementor-child/assets/js')
      ],
      dangerouslyAllowCleanPatternsOutsideProject: true,
      dry: false,
      verbose: true
    }),
    new RemoveEmptyScriptsPlugin({
      verbose: true,
    }),
    new MiniCssExtractPlugin({
      filename: '../css/[name].css'
    })
  ],
};

webpack.prod.js

const { merge } = require('webpack-merge');
const path = require('path');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production',
  optimization: {
    minimize: true,
    minimizer: [new CssMinimizerPlugin({
      parallel: true,
      minimizerOptions: {
        preset: [
          'default',
          {
            discardComments: { removeAll: true },
            calc: false,
          },
        ],
      },
    })],
  },
});

scr/_abstract/_main.scss

@use "sass:color";
@use "sass:math";

@use "colors.scss";
@use "mixins.scss";

$global__line-height: 1.55;

scr/_global/_main.scss

// @use "C:/xampp/htdocs/dev/transition65/wp-content/themes/theme-dev/src/_abstract/_main.scss" as *;  //< implementing this does not solve my issue
@use "layout.scss";
@use "typography.scss";

scr/_global/typography.scss

// @use "C:/xampp/htdocs/dev/transition65/wp-content/themes/theme-dev/src/_abstract/_main.scss" as *;  //< this like correctly imports the variables. Relative path did not seem to work

body {
  line-height: $global__line-height;
}

3. change my absolute paths to yours (__dirnames and relative paths did not seem to work).
4. Run npm run build

Expected Behavior

The content of theme-dev/src/abstract/main should be correctly added to theme-dev/src/global/typography.scss. The global sass variables should be defined and usable in any other sass file in the src directory.

Actual Behavior

The global variable is undefined and prevents compilation.

Environment

System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
    Memory: 47.07 GB / 63.88 GB
  Binaries:
    Node: 25.8.1 - C:\Program Files\nodejs\node.EXE
    npm: 11.12.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 146.0.7680.165
    Edge: Chromium (140.0.3485.54)
    Firefox: 143.0 - C:\Program Files\Mozilla Firefox\firefox.exe
    Internet Explorer: 11.0.19041.5794
  Packages:
    babel-loader: ^10.1.1 => 10.1.1
    browser-sync-webpack-plugin: ^2.3.0 => 2.4.0
    clean-webpack-plugin: ^4.0.0 => 4.0.0
    css-loader: ^7.1.1 => 7.1.4
    css-minimizer-webpack-plugin: ^8.0.0 => 8.0.0
    postcss-loader: ^8.1.1 => 8.2.1
    sass-loader: ^16.0.7 => 16.0.7
    sass-resources-loader: ^2.2.5 => 2.2.5
    svelte-loader: ^3.2.4 => 3.2.4
    webpack: ^5.74.0 => 5.105.4
    webpack-cli: ^7.0.2 => 7.0.2
    webpack-dev-server: ^5.0.4 => 5.2.3
    webpack-merge: ^6.0.1 => 6.0.1
    webpack-remove-empty-scripts: ^1.0.0 => 1.1.1

Additional Context

I also wrote a bug report for this sass-resource-loading plugin about the same issue: shakacode/sass-resources-loader#212. No response yet.

I contacted the sass-loader developer on GitHub and they said I shouldn't use additionalData to include my @use statements in files. Details here: webpack/sass-loader#1302 (comment)

This same file setup worked with a previous version of my Webpack config, detailed as follow:
package.json

{
  "name": "nocom-wp-theme",
  "version": "1.0.0",
  "description": "Nocom's custom WordPress theme.",
  "main": "index.js",
  "scripts": {
    "test": "NPM is working as intended.",
    "start": "webpack --watch --mode development --config webpack.dev.js",
    "build": "webpack --mode production --config webpack.prod.js"
  },
  "author": "Hélène Desaulniers",
  "license": "ISC",
  "browserslist": [
    "last 2 version",
    "> 1%",
    "not dead"
  ],
  "optionalDependencies": {
    "fsevents": "*"
  },
  "devDependencies": {
    "@babel/core": "^7.19.1",
    "@babel/preset-env": "^7.19.1",
    "autoprefixer": "^10.4.11",
    "babel-loader": "^8.2.5",
    "browser-sync": "^2.27.10",
    "browser-sync-webpack-plugin": "^2.3.0",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.7.1",
    "css-minimizer-webpack-plugin": "^4.1.0",
    "mini-css-extract-plugin": "^2.6.1",
    "postcss": "^8.4.16",
    "postcss-loader": "^7.0.1",
    "sass": "^1.54.9",
    "sass-loader": "^13.0.2",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-merge": "^5.8.0",
    "webpack-remove-empty-scripts": "^1.0.0"
  },
  "dependencies": {
    "core-js": "^3.25.2",
    "sass-resources-loader": "^2.2.5",
    "svelte": "^3.58.0",
    "svelte-loader": "^3.1.7",
    "webpack-dev-server": "^4.11.0"
  }
}

webpack.common.js

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');

module.exports = {
  entry: {
    'global': './src/_global/_main.scss',
    //^ Final file name (or path!). ^ Where the file is from
  },
  resolve: {
    alias: {
      svelte: path.dirname(require.resolve('svelte/package.json'))
    },
    extensions: ['.mjs', '.js', '.svelte'],
    mainFields: ['svelte', 'browser', 'module', 'main'],
    conditionNames: ['svelte']
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, '../hello-elementor-child/assets/js/'),
  },
  performance: {
    hints: false
  },
  module: {
    rules: [
      {
        test: /\.svelte$/,
        use: {
          loader: 'svelte-loader',
        }
      },
      {
        // required to prevent errors from Svelte on Webpack 5+
        test: /node_modules\/svelte\/.*\.mjs$/,
        resolve: {
          fullySpecified: false
        }
      },
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      { 
        test: /\.(sa|sc|c)ss$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /node_modules/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              sourceMap: true
            }
          },
          {
            loader: "postcss-loader",
            options: {
              sourceMap: true,
              postcssOptions: {
                plugins: [
                  ['autoprefixer']
                ]
              }
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'sass-resources-loader', //note: this is what I used in my previous project. Using this module in my current project results in the same undefined variables errors seen earlier.
            options: {
              resources: './src/_abstract/_main.scss', 
              hoistUseStatements: true
            }
          }
        ]
      },
    ]
  },
  plugins: [
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: [
        path.resolve(__dirname, '../hello-elementor-child/assets/css'),
        path.resolve(__dirname, '../hello-elementor-child/assets/js')
      ],
      dangerouslyAllowCleanPatternsOutsideProject: true,
      dry: false,
      verbose: true
    }),
    new RemoveEmptyScriptsPlugin({
      verbose: true,
    }),
    new MiniCssExtractPlugin({
      filename: '../css/[name].css'
    })
  ]
};

Has anybody successfully been able to import their sass mixins and variables to their setup with the lastest-ish versions of their modules?

Any help will be appreciated. Thank you!