map.setsass文档给出的示例不起作用，为什么呢？

@use "sass:map";\n\n$font-weights: (\n  \'regular\': 400,\n  \'medium\': 500,\n  \'bold\': 700\n);\n\nmap.set($font-weights, \'extra-bold\', 900);\n// ("regular": 400, "medium": 500, "bold": 700, "extra-bold": 900)\nmap.set($font-weights, \'bold\', 900);\n// ("regular": 400, "medium": 500, "bold": 900)\n

我的sass版本是1.32.5.
\n整个错误消息：

@use "sass:map";\n\n$font-weights: (\n  \'regular\': 400,\n  \'medium\': 500,\n  \'bold\': 700\n);\n\nmap.set($font-weights, \'extra-bold\', 900);\n// ("regular": 400, "medium": 500, "bold": 700, "extra-bold": 900)\nmap.set($font-weights, \'bold\', 900);\n// ("regular": 400, "medium": 500, "bold": 900)\n

我希望设置地图时不会抛出错误。

从dart-sass文档中我们看到dart-sass有命令行版本并且性能更高。

我想知道我们是否可以以某种方式使用该命令行版本与现有的 webpack 设置来加快构建时性能。

我可以在构建机器中安装 dart 库。但是有没有任何 webpack 插件可以利用它并使用机器依赖项来构建 sass 而不是 dart-sass npm？

我在我的项目中包含了一个第三方 SCSS 文件，因此 Dart SASS 显示了一长串警告。如何禁用第三方包含的警告？

我正在使用带有 Dart SCSS 的 Vue。Dart 有一个 quietDeps 选项，但我不确定我是否以正确的方式使用它。

// _common.scss
// Line below causes warnings to be displayed.
@import "~@progress/kendo-theme-default/dist/all";
// ...

// Vue.config.js
module.exports = {
  // ...
  css: {
    loaderOptions: {
      sass: {
        prependData: '@import "~@/styles/common";',
        sassOptions: {
          quietDeps: true
        }
      }
    }
  }
}

运行rake assets:precompile因错误而结束。找不到为什么它仍然需要 sassc，sassc 仅在使用从 Sprockets 3.x 升级到 4.x 的指南迁移到 sprockets 4 时才在项目中：

gem 'sass-rails', '>= 5'
bundle update sass-rails sprockets

然后按照 dartsass-rails 安装文档进行操作。做过：

rails tmp:clear
rake assets:clobber
rake assets:precompile

红宝石-3.1.2

gem 'rails', '7.0.3.1'
gem 'webrick'
gem 'sprockets-rails', '~> 3.4', '>= 3.4.2'
gem 'dartsass-rails', '~> 0.4.0'
...

manifest.js 文件内容：

//= link_tree ../images
//= link application.css
//= link application.js
//
//= link_tree ../builds

错误日志：

** Invoke assets:precompile (first_time)
** Invoke assets:environment (first_time)
** Execute assets:environment
** Invoke environment …

因为node-sass有一个很大的安装问题和兼容问题，所以我不想使用node-sass，更喜欢在我的项目中使用dart sass。但是当我像这样使用 sass-loader 时：

"sass-loader": "7.0.0",

表明：

  ERROR in ./node_modules/sass-loader/lib/loader.js!./node_modules/css-loader?sourceMap!./node_modules/sass-loader/lib/loader.js?sourceMap!./src/public/widget/style.scss
    Module build failed: Error: `sass-loader` requires `node-sass` >=4. Please install a compatible version.
        at Object.sassLoader (/Users/xiaoqiangjiang/source/reddwarf/frontend/crx-selection-translate/node_modules/sass-loader/lib/loader.js:31:19)
     @ ./node_modules/style-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/css-loader?sourceMap!./node_modules/sass-loader/lib/loader.js?sourceMap!./src/public/widget/style.scss 4:14-197

我应该怎么做才能让 sass-loader 忽略节点 sass 并使用 dart sass？我不想使用node sass，它浪费太多时间来处理安装和兼容问题。顺便说一句，这是我的项目package.json内容：

{
  "private": true,
  "repository": {
    "type": "git",
    "url": "git+https://github.com/jiangxiaoqiang/crx-selection-translate.git"
  },
  "scripts": {
    "xpostinstall": "node ./build/install-pdf-viewer",
    "dev": "webpack --config build/webpack.dev.config.js",
    "build": "gulp --cwd . --gulpfile build/gulp-build.js",
    "test": "karma start build/karma.config.js"
  },
  "dependencies": {
    "bootstrap-sass": "^3.4.1",
    "chrome-call": "^1.0.2",
    "connect.io": "^3.1.3",
    "interact.js": "^1.2.6",
    "js-wheel": …

我正在使用 Sass 并想使用@use关键字而不是@import. 因为，@import有很多错误的问题。也只有dart-sass支持这个功能，我把node-sass改成了dart-sass。但是，出现了问题。

我的原始代码

@import '@carbon/colors/scss/colors'

dart-sass 和@use应用代码

@use '@carbon/colors/scss/colors'

错误：未定义的变量。

我该如何解决？

到目前为止，我使用 Mads Kristensen 的 Web 编译器，但现在我在编译新的 sass 命令（如 @use）或使用一些 css 计算（如）时遇到问题

grid-template-columns:repeat(auto-fill,minmax(max(200px,(100% - (var(--n) - 1)*10px)/var(--n)),1fr));

我发现了 sass 的新实现：Dart Sass 但没有找到任何扩展来在 Visual Studio 中管理它，只有一些用于 Visual Studio 代码

Web 编译器上次更新是在 2018 年

我也尝试Sass 编译器，但得到相同的编译错误：

200px,(100% - (var(--n) - 1)*10px)/var(--n) 不是正确的 max 值

即使它是纯粹的工作CSS，也许它太新并且编译器无法识别它

目前唯一的方法是将该规则放入纯 css 文件中，并将其与 sass 生成的 css 一起导入，但这似乎不是一个好的解决方案

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

build-scss": "npm run update-version && rimraf bundles/* && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o dist/css

和

"watch-scss": "npm run build-scss && node-sass-chokidar --watch ./src/ --recursive --include-path ./node_modules -o dist/css"

sass想要用aka替换 node-sass-chokidar dart-sass。

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

我正在尝试将一些 Vue.js 单文件组件从::v-deep语法迁移到:deep()，如此处所述。但是，我不确定如何使其与嵌套SCSS 规则一起使用&__*。没有工作的规则&__*也很好。

我们使用的 SCSS 编译器是dart-sass。

例子

例如，有这个原始片段：

::v-deep .wrapper {
    display: flex;

    &__element {
        display: block
    }
}

正确地将代码编译为

[data-v-S0m3Ha5h] .wrapper__element {
    display: block;
}

并抛出警告：[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.

:deep()在顶层规则中

我尝试将其转换为:deep()这样：

:deep(.wrapper) {
    display: flex;

    &__element {
        display: block
    }
}

这会导致编译器错误，因为:deep(wrapper)__element不是有效的选择器。

:deep()在嵌套规则中

所以我将 移至:deep嵌套规则：

.wrapper …

问题：

按钮类被默认的 tailwind 基类覆盖。不知道为什么我的元素类没有被应用。

问题：

如何正确应用我的样式？

截屏：

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

/* index.scss */
:root {
  --color-primary: #00a3e0;
  --color-secondary: #470a68;
  --color-success: #87d500;
  --color-accent: #e87722;

  /* Dark themes below */
  --color-dark-primary: rgba(31, 41, 55, 1);
  --dark-text: rgba(187, 193, 198, 1);
}

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

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

import path from 'path'
import { Configuration as WebpackConfiguration, HotModuleReplacementPlugin } from 'webpack'
import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';
import HtmlWebpackPlugin from 'html-webpack-plugin' …