Using the @use rule

[Albinutte]

• Feature request
• Bug report
• Question

Hey there! I would like to be able to use the @use rule to load modules in a way that works both for with Meteor and with the storybook in our project. However, I cannot get namespeces to work. If I import module like this:

@use 'constants' as *;
@use 'colors' as *;

, I can use the variables from the imported modules. However, if I try to do something like this:

@use 'colors';

@mixin ellipsis($color: colors.$white, $isVertical: false) {
  ...
}

, compilation fails:

/Users/albina/.meteor/packages/meteor-tool/.2.4.0_1.1kt1kce.bfrc++os.osx.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.x86_64/dev_bundle/lib/node_modules/fibers/fibers.js:92
                                        return fn.apply(this, arguments);
                                                  ^
{
  message: 'Scss compiler error: Error: Invalid CSS after "...($color: colors": expected expression (e.g. 1px, bold), was ".$white, $isVertica"\n' +
    '        on line 46 of {}/client/css/base/_mixins.scss\n' +
    '>> @mixin ellipsis($color: colors.$white, $isVertical: false) {\n' +
    '\n' +
    '   ------------------------------^\n' +
    '\n',
  info: {
    file: '/imports/client/components/ui/react-table/Table.scss',
    line: undefined,
    column: undefined,
    func: undefined
  }
}

Is the use of @use just not fully supported by libsass? If so, any chance I could find ETA on migration to dart-sass?

meteor version: 2.4

fourseven:scss version: 4.15.0

[uuuJ]

Hey @Albinutte , I'm digging some infos about the @use in fourseven:scss. Everything I found on this topic lead me to the fact that the @use feature can't be used in fourseven:scss as it's not supported by node-sass (which is used by fourseven:scss).

Everything except this issue where you seem to say that you managed to make it work... Did you really ? How ?

[Albinutte]

Hey @uuuJ, I'm not sure if something changed in the latest versions, but I'm afraid I can no longer use @use at all 😞 Last time I tried it, doing something like @use 'colors' as *; would simply import everything in the file, potentially causing collisions. When I try it now though, Meteor simply fails to start. Sorry!

[nicubarbaros]

Any updates here?