Nuxt2项目Vue组件使用@use "sass:math"报错如何配置

问题原因 #

你遇到的@use rules must be written before any other rules报错，是因为styleResources配置会自动将~/assets/global-inject.scss的内容注入到所有Vue文件的style块最顶部，导致你在组件内写的@use "sass:math"不在代码最开头，违反了Sass的语法要求：@use规则必须出现在所有其他规则之前。

解决方案 #

方案一：修改全局注入文件（推荐） #

直接在你已经配置的全局注入文件顶部加@use规则即可：

1. 打开~/assets/global-inject.scss，在文件最顶部添加如下代码：

// 不需要math前缀可以加 as *，使用时直接写div($height,2)即可
@use "sass:math" as *;
// 如果不想污染全局命名空间就去掉 as *，使用时保留math.div写法
// @use "sass:math";

2. 删除组件style中手动添加的@use "sass:math";代码，直接使用除法函数即可。

方案二：通过sass-loader配置全局注入 #

如果不想修改现有全局文件，可以直接在nuxt.config.js中配置sass-loader的注入规则，优先级高于styleResources的注入内容：

build: {
  postcss: {
    plugins: {
      'postcss-easing-gradients': {},
    },
  },
  // 新增sass loader配置
  loaders: {
    scss: {
      // sass-loader@10及以上用additionalData，低于10版本替换为prependData
      additionalData: `@use "sass:math" as *;`
    }
  },
},
styleResources: {
  scss: [
    '~/assets/global-inject.scss',
  ],
},
css: [
  '~/assets/base.scss',
  '~/assets/reset.scss',
],

注意事项 #

• 两种方案二选一即可，不要同时配置，避免重复引入报错
• 配置后所有scss代码中都可以直接使用除法函数，不需要再单独写@use "sass:math"

内容的提问来源于stack exchange，提问作者Lars