vue.js - 在 Vue 组件中使用 @use "sass:math"

Question

在 Nuxt 项目中，我创建了一个具有以下样式的按钮组件:

<style lang="scss">
  .my-button {
    // lots of cool styles and stuff here
    $height: 28px;
    height: $height;
    border-radius: $height / 2;
    }
  </style>

问题是 border-radius: $height/2; 行给出了这个警告:

    ╷
182 │     border-radius: $height / 2;
    │                    ^^^^^^^^^^^
    ╵
    components/MyButton.vue 182:20  button-size()
    components/MyButton.vue 186:5   root stylesheet

: Using / for division is deprecated and will be removed in Dart Sass 
2.0.0.

Recommendation: math.div($height, 2)

它还链接到 this page描述弃用。

但是，如果我将 @use "sass:math" 添加到我的样式标签的顶部，如下所示:

  <style lang="scss">
    @use "sass:math";
    //Cool styles and stuff
    $height: 28px;
    height: $height;
    border-radius: math.div($height, 2);
  </style>

我收到这个错误:

 [Vue warn]: Error in render: "Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):                                                              12:13:59
SassError: @use rules must be written before any other rules.
    ╷
102 │ @use "sass:math";
    │ ^^^^^^^^^^^^^^^^
    ╵
  components/MyButton.vue 102:1  root stylesheet"

我想我需要在 nuxt.config.js 文件中的某处添加 @use "sass:math" 的导入，以将其加载到所有组件或类似组件中，但我不知道在哪里。

我的 nuxt.config.js 中的 css 相关 block 目前看起来像:

  build: {
    postcss: {
      plugins: {
        'postcss-easing-gradients': {},
      },
    },
  },
  styleResources: {
    scss: [
      '~/assets/global-inject.scss',
    ],
  },
  css: [
    '~/assets/base.scss',
    '~/assets/reset.scss',
  ],

Answer 1

更新 @nuxtjs/style-resources到 1.1 版以上并使用 hoistUseStatements 修复它。

我将 nuxt.config.js 中的 styleResources 对象更改为:

styleResources: {
    scss: [
      '~/assets/global-inject.scss',
    ],
    hoistUseStatements: true,
  },

并在 global-inject.scss 的顶部添加了 @use "sass:math";。