使用 Dart Sass 而不是 Node Sass 制作 sass-loader 可能吗?

6
由于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忽略node-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": "https://github.com/jiangxiaoqiang/js-wheel.git",
    "translation.js": "github:jiangxiaoqiang/translation.js",
    "vue": "^1.0.24",
    "vue-router": "^0.7.11"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-runtime": "^6.9.0",
    "babel-polyfill": "^6.9.1",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-stage-3": "^6.5.0",
    "chrome-env": "^0.0.6",
    "css-loader": "^0.23.1",
    "del": "^2.2.0",
    "download": "^5.0.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^0.8.5",
    "fs-extra": "^8.1.0",
    "gulp": "^3.9.1",
    "gulp-clean-css": "^2.3.2",
    "gulp-htmlmin": "^2.0.0",
    "gulp-jsonmin": "^1.2.0",
    "gulp-uglify": "^1.5.3",
    "gulp-zip": "^3.2.0",
    "isparta-loader": "^2.0.0",
    "jasmine-core": "^2.99.1",
    "karma": "^6.3.11",
    "karma-chrome-launcher": "^1.0.1",
    "karma-coverage": "^2.1.0",
    "karma-coveralls": "^2.1.0",
    "karma-firefox-launcher": "^1.3.0",
    "karma-ie-launcher": "^1.0.0",
    "karma-jasmine": "^1.1.2",
    "karma-phantomjs-launcher": "^1.0.0",
    "karma-safari-launcher": "^1.0.0",
    "karma-sourcemap-loader": "^0.3.8",
    "karma-webpack": "^1.7.0",
    "phantomjs-prebuilt": "^2.1.6",
    "raw-loader": "^0.5.1",
    "sass": "1.48.0",
    "sass-loader": "7.0.0",
    "style-loader": "^0.13.0",
    "vue-html-loader": "^1.2.0",
    "webpack": "^3.12.0",
    "webpack-cli": "^4.9.1"
  },
  "author": "Jiangxiaoqiang <jiangtingqiang@gmail.com>",
  "license": "GPLv3",
  "bugs": {
    "url": "https://github.com/jiangxiaoqiang/crx-selection-translate/issues"
  },
  "homepage": "https://github.com/jiangxiaoqiang/crx-selection-translate#readme"
}

欢迎提出任何建议或线索。我尝试调整webpack配置,像这样指定load-sass使用dart sass而不是node sass:

{
        test : /\.scss$/ ,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'sass-loader',
            options: {
              implementation: require('sass'),
            },
          },
        ]
      }

仍然无法正常工作。


你试过用阿拉丁或SnufkinWeb吗? - undefined
5
你正在使用非常老的npm模块。最新版本的sass-loader(目前为12.x版本)支持dart-sass。https://webpack.js.org/loaders/sass-loader/甚至你的webpack版本也相当老旧。 - undefined
是的,我已经在网上搜索过了,但没有找到如何指定哪种类型的Sass加载器,我也尝试了一些建议,但仍然没有解决这个问题。@ItayMoav-Malimovka - undefined
2
是的,我知道这通常是一项不可能完成的任务 :( 你升级一个模块,另一个依赖于旧版本的模块就会出问题,然后你再升级那个模块,又会有其他问题出现,如此循环。试试最旧的sass-loader,它支持dart-sass吗? - undefined
8
sass-loader 9.x是第一个支持Dart Sass的版本,但它需要使用Webpack 4.36或更新的版本。 - undefined
显示剩余2条评论
1个回答

1
今天的答案是肯定的!
npm uninstall node-sass sass-loader
npm install sass
npm install sass-loader # <- if you were using sass-loader earlier otherwise skip

重建你的项目,我们的项目因为一些无效的scss选择器而崩溃了,所以我不得不修复它,以使一切恢复正常。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接