如何在 vue.config.js 中实现 sass:math

发布于 2025-01-09 20:27:00 字数 1249 浏览 1 评论 0原文

我正在使用 vue-cli - v2.6 上的 Vue； sass v1.49 - 并使用简单的除法计算，但我在控制台中收到错误：

弃用警告：在 calc() 之外使用 / 进行除法是已弃用并将在 Dart Sass 2.0.0 中删除。

我尝试了一些文档 ('webpack-contrib::implementation'; 'dev.to::how to use dart-sass with vue')，它要求你像这样配置 vue.config.js：

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        implementation: require("sass"),
      },
    },
  },
};

但没有成功：

语法错误：ValidationError：选项对象无效。 Sass 加载器有使用与 API 不匹配的选项对象进行初始化架构。
options.implementation 应该是一个对象：object { … } ->所使用的sass的实现 (https://github.com/webpack-contrib/sass-loader#implementation).

那么如何在Vue-cli中实现sass: Math的使用呢？

原文

I am using vue-cli - Vue on v2.6; sass v1.49 - and using simple division calculations, but I follow receiving errors in the console:

Deprecation Warning: Using / for division outside of calc() is
deprecated and will be removed in Dart Sass 2.0.0.

I tried some documentations ('webpack-contrib::implementation'; 'dev.to::how to use dart-sass with vue'), which asks you to configure vue.config.js like this:

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        implementation: require("sass"),
      },
    },
  },
};

But without success:

Syntax Error: ValidationError: Invalid options object. Sass Loader has
been initialized using an options object that does not match the API
schema.
options.implementation should be an object: object { … } -> The implementation of the sass to be used
(https://github.com/webpack-contrib/sass-loader#implementation).

So how do I implement the use of sass: Math in Vue-cli?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

煞人兵器 2025-01-16 20:27:00

经过一段时间尝试一些解决方案后，最简单的实现如下：

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: '@use "sass:math";',
      },
    },
  },
};

当我使用全局变量文件时，最终设置如下：

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: `
          @use "sass:math";
          @import "~@/assets/scss/src/_variables.scss";
        `,
      },
    },
  },
};

After some time trying some solutions, the easiest has been implemented like this:

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: '@use "sass:math";',
      },
    },
  },
};

As I use a global variable file, the final setup was like this:

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: `
          @use "sass:math";
          @import "~@/assets/scss/src/_variables.scss";
        `,
      },
    },
  },
};

回复收藏 0 原文

~没有更多了~