SCSS Exported Variables Are Not Defined

[Logikgate]

Environment Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI: 7.0.7

• Cross-platform modules: 7.0.3

• Android Runtime: 7.0

• iOS Runtime: 7.0

• Plugin(s):

• Node.js: 12.12.0

• [x] Please, attach your package.json and webpack.config.js as these configurations are usually critical for investigating issues with webpack

Describe the bug In our app we are using the :export modifier in a variables.scss file to be able to reference a few css variables within javascript/typescript files. Prior to updating to @nativescript/webpack from nativescript-webpack-dev the below configuration was working. Is there a change to the webpack config that would make this work again?

To Reproduce variables.scss

$primary: #00263A;
$accent: #f3a712;
$secondary: #000000;

:export {
    primary: $primary;
    secondary: $secondary;
    accent: $accent;
}

file.ts

import variables from "variables.scss"

console.log(variables.locals.primary) // this causes an undefined error now

webpack config

{
    test: /\.s[ac]ss$/,
    exclude: /[\/|\\]app\.scss$/,
    use: [
        "@nativescript/webpack/helpers/style-hot-loader",
        "@nativescript/webpack/helpers/apply-css-loader.js",
        { loader: "css-loader", options: { url: false } },
        "sass-loader"
    ]
},

Expected behavior

The :export variables are accessible to javascript/typescript files that import the variables.scss file.

Additional context This the a console log of the entire variables object that gets imported.

CONSOLE LOG: [[../assets/scss/variables.scss, :export {
primary: #00263A;
secondary: #000000;
accent: #f3a712;
}, , {
"version": 3,
"sources": [
"webpack://../assets/scss/variables.scss"
],
"names": [],
"mappings": "AAaA;EACI,gBAdM;EAeN,kBAbQ;EAcR,eAfK;AAGT",
"sourcesContent": [
"$primary: #00263A;\n$accent: #f3a712;\n$secondary: #000000;\n$body-bg: #ffffff;\n$body-color: #000000;\n$component-bg: #ffffff;\n$component-color: $primary;\n$card-cap-bg: $primary;\n$card-cap-color: #fff;\n$complementary: $primary;\n$complementary-color: #ffffff;\n$font-size: 14;\n\n:export {\n    primary: $primary;\n    secondary: $secondary;\n    accent: $accent;\n}\n"
],
"sourceRoot": ""
}], function toString() {
return this.map(function (item) {
var content = cssWithMappingToString(item, us...<omitted>... }, function (modules, mediaQuery, dedupe) {
if (typeof modules === 'string') {
// eslint-disable-next-li...<omitted>... }]

[Logikgate]

We finally isolated this to a change in css-loader v4. Adding the variables.scss file to the modules auto function fixed the issue for us. Updated webpack config is below for reference

{
    test: /\.s[ac]ss$/,
    exclude: /[\/|\\]app\.scss$/,
    use: [
        "@nativescript/webpack/helpers/style-hot-loader",
        "@nativescript/webpack/helpers/apply-css-loader.js",
        {
            loader: "css-loader",
            options: {
                url: false,
                modules: {
                    auto: (resourcePath) => resourcePath.endsWith("variables.scss")
                }
            }
        },
        { loader: "sass-loader", options: { implementation: require("sass") } }
    ]
}