SassError: can't properly access theme-color()

Question

完整错误：

Failed to compile.

./src/@core/scss/react/libs/noui-slider/noui-slider.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-0-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-0-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-0-4!./src/@core/scss/react/libs/noui-slider/noui-slider.scss)
SassError: $color: theme-color("primary") is not a color.
   ╷
23 │     "lighten-5": lighten(theme-color("primary"), 25%),
   │                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  src/@core/scss/base/core/colors/palette-variables.scss 23:18  @import
  src/@core/scss/base/core/colors/palette-noui.scss 11:9        @import
  src/@core/scss/react/libs/noui-slider/noui-slider.scss 3:9    root stylesheet

明确地说，一旦我将所有出现的 theme-color("primary") 切换为 SCSS 文件中的实际颜色（#0074d9，我从 Bootstrap 文档中找到的蓝色，这是假定的原色），然后它给了我相同的错误 theme-color("secondary") ，这些错误在文件的后续行中。我正在处理一个模板，这是此错误来自的文件顶部的导入：

// Overrides user _variables-components
@import '../../bootstrap-extended/include';

这将导致以下文件可能是由模板制作者制作的：

// Functions
@import 'bootstrap/scss/functions'; // Bootstrap core function
@import 'functions'; // Bootstrap extended function

// Variables
@import 'scss/variables/variables'; // Bootstrap custom variable override (for user purpose)
@import 'variables'; // Bootstrap extended variable override
@import 'bootstrap/scss/variables'; // Bootstrap core variable

// Mixins
@import 'bootstrap/scss/mixins'; // Bootstrap core mixins
@import 'mixins'; // Bootstrap extended mixins

package.json:

"bootstrap": "5.1.3",
"sass-loader": "^12.2.0"

也许我应该降级 bootstrap？尽管主题已经在尝试这样做，但我是否应该尝试覆盖 $theme-colors 下 palette-variables.scss 文件中不起作用的变量？

我还没有在本地启动这个反应项目和运行，这是目标，这似乎是在获得开发服务器之前要克服的最后一组错误运行因为当运行 npm start 它会说“启动开发服务器”，打开 localhost:3000 几乎可以工作了。

Answer 1

我刚刚使用 yarn 安装模块，一切正常。

SassError: can't properly access theme-color()

SassError: can't properly access theme-color()

sass

reactjs

react-bootstrap

bootstrap-5