因为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": "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'),
},
},
]
}
仍然没有工作。