SassError: @use rules must be written before any other rules

[andrey-hohlov]

• Laravel Mix Version: 6.0.19

• Node Version : v14.16.0

• NPM Version: 6.14.11

• OS: macOS 10.15.4

Description:

Error SassError: @use rules must be written before any other rules happens because resources loader injects content to the top of each file.

Famous issue solved (or not yet) in different resource loaders, for example:
nuxt-modules/style-resources#143

If mix uses sass-resources-loader the only needed thing is to enable hoistUseStatements option.

Steps To Reproduce:

Use vue in mix config:

vue({
    version: 3,
    extractStyles: true,
    globalStyles: {
      scss: [
        'path/to/variables/file.scss',
      ],
    },
})

In your vue component use scss @use

<style lang="scss">
@use "sass:math";

// ... your styles
</style>

[andrey-hohlov]

Temp workaround:

mix.extend('fixSassResourcesLoader', (webpackConfig) => {
  const scssRule = webpackConfig.module.rules.find((rule) => {
    const { test } = rule;
    return test && typeof test.test === 'function' &&  test.test('.scss');
  });

  if (!scssRule) return;

  scssRule.oneOf.forEach((oneOf) => {
    oneOf.use.forEach(({ loader, options}) => {
      if (loader === 'sass-resources-loader') {
        options.hoistUseStatements = true;
      }
    });
  })
});

mix.fixSassResourcesLoader();