最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - is it possible to make sass-loader using dart-sass not node-sass - Stack Overflow

programmeradmin6浏览0评论

Because the node-sass have a big install problem and patible problem, I do not want to use node-sass, prefer to use dart sass in my project. But when I use the sass-loader like this:

"sass-loader": "7.0.0",

shows that:

  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 patible 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

what should I do to let the sass-loader ignore the node sass and use dart sass? I do not want to use node sass, it waste too much time to handle the install and patible problem. BTW, this is my project package.json content:

{
  "private": true,
  "repository": {
    "type": "git",
    "url": "git+.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": ".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 <[email protected]>",
  "license": "GPLv3",
  "bugs": {
    "url": ";
  },
  "homepage": ";
}

any suggestion or clue was wele. I tried to tweak the webpack config like this to specify the load-sass to use dart sass not node sass:

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

still did not work.

Because the node-sass have a big install problem and patible problem, I do not want to use node-sass, prefer to use dart sass in my project. But when I use the sass-loader like this:

"sass-loader": "7.0.0",

shows that:

  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 patible 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

what should I do to let the sass-loader ignore the node sass and use dart sass? I do not want to use node sass, it waste too much time to handle the install and patible problem. BTW, this is my project package.json content:

{
  "private": true,
  "repository": {
    "type": "git",
    "url": "git+https://github./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./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 <[email protected]>",
  "license": "GPLv3",
  "bugs": {
    "url": "https://github./jiangxiaoqiang/crx-selection-translate/issues"
  },
  "homepage": "https://github./jiangxiaoqiang/crx-selection-translate#readme"
}

any suggestion or clue was wele. I tried to tweak the webpack config like this to specify the load-sass to use dart sass not node sass:

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

still did not work.

Share Improve this question edited Jan 16, 2022 at 5:18 Dolphin asked Jan 16, 2022 at 4:55 DolphinDolphin 39.1k102 gold badges374 silver badges714 bronze badges 7
  • Did u try with Aladin or SnufkinWeb? – Itay Moav -Malimovka Commented Jan 16, 2022 at 5:20
  • 5 You are using very old npm modules. Latest sass-loader (currently in version 12.x) supports dart-sass. webpack.js/loaders/sass-loader Even your webpack version is quite old. – Timo Commented Jan 16, 2022 at 5:23
  • 1 I know, I could not upgrade the webpack for a big jump, because so many lower version of dependencies, the legacy was webpack 1.x, so I tried to upgrade ot 3.x right now. I tried to ugprade to 5.x but it seems too much patible problem.@Timo – Dolphin Commented Jan 16, 2022 at 5:25
  • 2 Yeah, I know that this is often an impossible task :( You upgrade one module, another one depending on the older version breaks, upgrade that one, something else breaks and so on. Try with the oldest sass-loader which has dart-sass support? – Timo Commented Jan 16, 2022 at 5:27
  • 9 sass-loader 9.x is the first one with dart-sass support, but it requires webpack 4.36 or newer – Timo Commented Jan 16, 2022 at 5:30
 |  Show 2 more ments

1 Answer 1

Reset to default 3

Answer today is Yes!

npm uninstall node-sass sass-loader
npm install sass
npm install sass-loader # <- if you were using sass-loader earlier otherwise skip

Rebuild your project, ours started crashing with error due to that we had some invalid scss selectors so I had to fix that also for everything to work again.

发布评论

评论列表(0)

  1. 暂无评论