标签: dart-sass

由于node-sass已经不再维护，并且不兼容高版本的node，所以我尝试将node-sass更改为dart-sass，当我在vue项目中使用dart-sass时，如下所示：

"sass": "1.48.0",

显示错误：

npm ERR! /Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/usr/include/c++/v1/type_traits:710:50: note: 'remove_cv' declared here
npm ERR! template <class _Tp> struct _LIBCPP_TEMPLATE_VIS remove_cv
npm ERR!                                                  ^
npm ERR! 1 error generated.
npm ERR! make: *** [Release/obj.target/binding/src/binding.o] Error 1
npm ERR! gyp ERR! build error
npm ERR! gyp ERR! stack Error: `make` failed with exit code: 2
npm ERR! gyp ERR! stack     at ChildProcess.onExit (/Users/xiaoqiangjiang/source/reddwarf/frontend/crx-selection-translate/node_modules/node-gyp/lib/build.js:262:23)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
npm ERR! gyp ERR! …

我正在创建一个与webpack. 我正在sass项目中使用，所有scss文件都位于scss根目录中。我在名为 的目录中创建了一些部分内容partials。目录结构如下所示：

测验应用程序的目录结构

在文件的顶部quiz.module.scss，我有这个：

@use "colors" as *;\n@use "font";\n

我不想写@use "partials/colors"and @use "partials/font"，所以我决定将其包含在所使用的scss/partials列表中。我的某个地方有这个loadPathsscsswebpack.dev.js：

const PATHS_TO_SASS_PARTIALS = ["scss/partials"]\n

这在其他地方：

{\n  test: /\\.module\\.scss$/,\n  use: [\n    {\n      loader: "style-loader"\n    },\n    {\n      loader: "css-loader",\n      options: {\n        modules: {\n          mode: "local"\n        }\n      }\n    },\n    {\n      loader: "resolve-url-loader"\n    },\n    {\n      loader: "sass-loader",\n      options: {\n        sourceMap: true,\n        sassOptions: …

当我尝试在 laravel 版本 8 上编译引导脚手架时，会出现以下错误

node_modules\bootstrap\scss\mixins\_grid.scss 67:16            row-cols()
    node_modules\bootstrap\scss\mixins\_grid-framework.scss 43:13  @content
    node_modules\bootstrap\scss\mixins\_breakpoints.scss 65:5      media-breakpoint-up()
    node_modules\bootstrap\scss\mixins\_grid-framework.scss 32:5   make-grid-columns()
    node_modules\bootstrap\scss\_grid.scss 72:3                    @import
    node_modules\bootstrap\scss\bootstrap.scss 16:9                @import
    resources\sass\app.scss 8:9                                    root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(100%, $count)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ?
66 ?     flex: 0 0 100% / $count;
   ?               ^^^^^^^^^^^^^
   ?
    node_modules\bootstrap\scss\mixins\_grid.scss 66:15            row-cols()
    node_modules\bootstrap\scss\mixins\_grid-framework.scss 43:13  @content
    node_modules\bootstrap\scss\mixins\_breakpoints.scss 65:5      media-breakpoint-up()
    node_modules\bootstrap\scss\mixins\_grid-framework.scss 32:5   make-grid-columns()
    node_modules\bootstrap\scss\_grid.scss 72:3                    @import
    node_modules\bootstrap\scss\bootstrap.scss …

我正在升级一个旧系统，其中有很多：

@import "~bootstrap/scss/mixins";

使用 dart-sass CLI 编译时会失败。

我曾经使用 node-sass 以及类似node-sass-tilde-importer和的包node-sass-package-importer来帮助处理该语法。他们似乎不适合 dart-sass。

鉴于我现在使用的是dart sass CLI，我该如何处理这个问题？

我的项目正在运行node-sass，但我决定将其更改为sass（dart-sass），因为我想避免安装python、g++并make只是为了运行npm install，而node-sass会因为node-gyp而强制你这样做。

所以我跑了

$ npm uninstall node-sass\n$ npm install sass\n

运行npm run build( vue-cli-service build) 工作正常，但我的持续集成在npm run test:unit( vue-cli-service test:unit) 上失败。

这是完整的错误：

 FAIL  tests/unit/example.spec.ts\n\xe2\x97\x8f Test suite failed to run[vue-jest] \nError: You are trying to use "scss". node-sass is missing.\n\n    To install run:  \nnpm install --save-dev node-sass\nat error (node_modules/vue-jest/lib/throw-error.js:2:9)\nat module.exports (node_modules/vue-jest/lib/ensure-require.js:38:5)                                                                                                                                                                     at module.exports (node_modules/vue-jest/lib/compilers/scss-compiler.js:20:3)\nat processStyleByLang (node_modules/vue-jest/lib/process-style.js:11:82)\nat processStyle (node_modules/vue-jest/lib/process-style.js:20:17)\nat node_modules/vue-jest/lib/process.js:93:13\nat Array.map (<anonymous>)\nat Object.module.exports [as process] (node_modules/vue-jest/lib/process.js:90:8)\nTest Suites: 1 failed, 1 total\nTests: …