sass-resources-loader and css-modules 'composes'

[t22james]

I'm having an issue when trying to use the css-modules functionality 'composes', like:

_vars.scss

$font-weight-bold: 900;

type.scss

.bold{
    font-weight: $font-weight-bold;
}

example.scss

.exampleHeading{
   composes: bold from './type.scss';
}

the issue seems to be that at the time css-modules processes type.scss as part of the compose, the variables used in type.scss (which are otherwise used/available via sass-resources-loader when using a class from type.scss directly from js), don't seem to be available...

or putting this another way, is there a way for sass-resources-loader to be making the vars from a settings file available to css-modules during it's composes functionality?

Am I the only one who's tried to compose from a file that is dependent on sass-resources-loader enabled vars?

[dswright]

I am having the exact same issue. For now I have gotten it working by directly importing my sass variable files to the css module that defines the css class being composed. But that is exactly what sass-resources-loader is supposed to allow me to avoid.

@import '../../styles/sass-globals/colors';

.sectionHeading {
  color: $blue-70;
  font-size: 1.375rem;
}

[justin808]

@alexfedoseev Any idea on this one?

[alex35mil]

It's simply doesn't work w/ CSS modules composes and we use mixins instead.

[nagman]

Geez, I'm not alone in this case. Same question here!

[chaishi]

webpack config

{
test: /.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
{
loader: 'sass-resources-loader',
options: {
resources: [
'./src/assets/color/_color.scss'
]
}
}
]
}

---

sass-resources-loader

'use strict';
console.log('---------------------- sass-resources-loader');

var _fs = require('fs');

---

css-loader

/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
module.exports = require("./lib/loader");
console.log('------------------css-loader');

---

style-loader/css-loader/sass-loader, all of them can be loaded and running, but sass-resources-loader can not.

---

[ElliotShi]

for Less, even cannot use mixins.

[CyberCookie]

I've stumbled upon the very same issue when used compose and solved it having imported dependency file manually. Even though variables are defined on the both ends of composes rule - they get lost somewhere in the middle