问题标签 [dart-sass]

在这方面严重需要帮助，拜托！我在使用 bootstrap ^5.1.1 学习 webpack ^5.55.1 时编译 Bootstrap 5 面临严峻挑战（没有反应，vue .. 在这个阶段什么都没有）。开发编译没问题，但在生产模式下构建时失败（附截图）。它不指向任何特定文件，index.sass:1:8744而只是导入一些 bootstrap.scss 文件。

我在下面提供一切必要的东西。哪位大侠能帮帮我！虽然我不好意思提出这么长的问题，但我们强烈要求任何帮助，我们将不胜感激。

Package.json脚本：

（我发现还有一个症状：wcript“build”每次都失败，但脚本“build-dev”在我尝试使用 sassOptions{} 缩小输出 CSS 时也失败。我希望这个信息有助于解决它反正。）

Webpack.config.js （sass 规则）：

和

网站.js

糟糕的索引.sass

最后，错误：

我在 package.json 中有以下脚本，与 node-sass-chokidar 一起使用，尝试了多种组合但不起作用。这是我当前的脚本：

和

想用sassaka替换 node-sass-chokidar dart-sass。

无法找出可以满足现有要求的正确语法。我试过--load-path我试过input : output语法。没运气。

我正在使用webpack@5.58.1和。我的项目使用来自 node_modules 的 scss 文件。当我构建项目时，webpack 给了我一堆看起来像的错误sass-loader@12.1.0dart-sass

这是我对 sass 文件的规则配置：

我的假设是 sass-loader 完全合并了 scss 文件，之后它无法正确导入依赖项。我试图用 替换 style-loader { loader: MiniCssExtractPlugin.loader },，但它并没有真正改变任何事情。

我正在使用 Angular 版本 10.2.0、NodeJs 14.17.3 并且想从 node-sass 切换到 package sass（以前称为 dart-sass）。我卸载了 node-sass，删除了 node_modules，清除了 npm 缓存，npm install 并安装了 sass。当我运行程序时，sass-loader 会抛出错误。

来自我的 package.json 的片段：

你能帮我解决我的问题吗？

有没有办法使用 div 类中的 sass mixin 生成像素/百分比/rem 大小？例如，以下是类可能设置的示例：

这将是 CSS 输出：

基本上试图让内容经理/设计师在需要时非常容易地微调某些东西。

我正在使用一些复制的 SASS 代码来启动一个项目。它是用 @import 为 Ruby SASS 编写的，我已将其更改为 @use 用于 Dart SASS。

样式.scss

css/_var.scss

从 style.scss 所在的目录中，我跑了sass --watch .

我不断收到错误：

错误：未定义的变量。╷ 10 │ 字体大小：($baseFontSize / 16) * 100%；│ ^^^^^^^^^^^^^ ╵<br /> css/_typography.scss 10:17 @use
style.scss 6:1 根样式表

我正在使用 SASS 版本 1.43.4

我有一个名为_mixins.scss. 我把它和我的其他部分一起@use放在一个文件中。_index.scss我@forward所有这些都在我的home.scss文件中。

的内容_mixins.scss是

的内容_index.scss是

（所有文件路径都正确）

但是，当我尝试使用我的 mixin 时，出现错误。

我的文件夹结构是

_mixins.scss并且_index.scss在 scss 目录中，而home.scss在主目录中。

有趣的是，当我使用旧的 deprecated 时@import，我的 mixin 可以工作。我该如何解决这个问题？

我基本上是通过更改一些变量定义来对现有的 scss 做一个“主题”。我需要使用不同的变量呈现单独的 css 包。我想有单独的主文件来导入公共文件以保持干燥。

文件结构

_main-shared.scss包含@import所有其他 scss 文件的语句，但不导入变量。

主要文件内容：

但是多级导入似乎不起作用，导致 SassError：_main-shared.scss 中的未定义变量。

有一个更好的方法吗？我无法在 _main-shared.scss 中导入变量，因为它会破坏拥有单独变量文件的目的。

有没有我不知道的解决方法或更好的解决方案？

我正在使用 "sass": "^1.44.0" (dart-sass) 和 create-react-app。我在 _colors.scss 中有以下内容：

这是我的 _derivedColors.scss：

我想要发生的是获得 4 个全局变量，这些变量将在 $app-colors 中缩放每种颜色的白度以获得百分比值并适当命名。例如，第一个变量将被命名$blue-20并包含color.scale(#1caac5, 20%).

编译我的代码时，出现以下错误：

./src/components/common/CallToAction/style.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src? ?postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4 !./src/components/common/CallToAction/style.scss) SassError: Invalid CSS after "...n $app-colors {": expected 1 selector or at-rule, is "$#{$colorName}-20 : " 在 src/style/_derivedColors.scss 的第 9 行，来自 /Users/mihasustersic/Work/taia-app-react/src/components/common/CallToAction/style 第 1 行的 src/style/_variables.scss 第 4 行.scss @each $colorName, $colorHex in $app-colors {

----------------------------------------------------------^

我究竟做错了什么？

问题：

Button 类被默认顺风基类覆盖。不知道为什么我的元素类没有被应用。

问题：

如何让我的样式正确应用？

截屏：

如您所见，.documentCategory__row 上的背景颜色被按钮覆盖，index.scss 上的 [type=button] 是在@tailwind/base 中定义的。

我不确定这是否与我切换到 dart-scss 有关，所以这是我的 webpack 配置，以防我遗漏了什么

如果我缺少其他需要的文件，请告诉我！