javascript - Sass:使用@use 和@forward 时的模块循环

标签 javascript vue.js webpack sass

在我的 style.scss我正在使用以下方法加载 scss 文件:

@use "bootstrap/functions";
稍后在 style.scss我加载了另一个名为 _variables.scss 的 scss 文件.在这个文件中,我还想使用函数文件,例如:
$link-color:                functions.theme-color("primary") !default;
@include functions.assert-ascending($grid-breakpoints, "$grid-breakpoints");
问题是我收到以下错误:
SassError: Module loop: this module is already being loaded.
   ┌──> src/assets/scss/bootstrap/_variables.scss
4  │ @forward "functions";
   │ ^^^^^^^^^^^^^^^^^^^^ new load
   ╵
   ┌──> src/assets/scss/style.scss
22 │ @use "bootstrap/functions";
   │ ━━━━━━━━━━━━━━━━━━━━━━━━━━ original load
   ╵
我尝试用 @use 加载它和 @forward ,我也尝试不加载它以查看它是否可以在当前上下文中找到它,但没有任何效果。我究竟做错了什么?
我正在使用带有 sass-loader 的 Webpack使用 dart-sass .

最佳答案

由于@import,我目前遇到了同样的问题于 2022 年 10 月折旧。
这是因为您正在有效地将 Bootstrap /函数加载到您的 style.scss 中。两次,一次作为自身,一次在 _variables.scss 内.
因为@use不是全局的,例如 @import是,它似乎自动拒绝任何重复,抛出错误而不是忽略重复。

关于javascript - Sass:使用@use 和@forward 时的模块循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64741669/

相关文章:

javascript - 浏览器强制发送multipart/formdata

javascript - Vue.js,v-bind 上多个类的选项

vue.js - 如何阻止 vuetify v-bottom-sheet 或 (v-dialog) 阻止与主要内容的交互

javascript - 使用 Istanbul + Webpack 对 JSX 文件进行代码覆盖

javascript - 路由 : Child Component is not called

带有三重 => 的 Javascript 函数语法

php - Google 如何在不重新加载页面的情况下将搜索参数附加到 url?

plugins - 如何在 VS Code 中设置 Vue 文件格式?

javascript - 使用 Webpack + Typescript 加载 AmCharts

css - 无法使用 css-blocks 和 webpack 读取未定义的属性 'context'