Gulp不是将scss转换成css

在Visual Studio中,Gulp不会将我的scss文件转换为css

我得到的错误是:

cmd.exe / c gulp –tasks-simple C:\ Users \ sam \ Documents \ Visual Studio 2017 \ Projects \ MyProject \ MyProject \ node_modules \ node-sass \ lib \ binding.js:15 throw new Error(errors.missingBinary ()); ^错误:缺less绑定C:\ Users \ sam \ Documents \ Visual Studio 2017 \ Projects \ MyProject \ MyProject \ node_modules \ node-sass \ vendor \ win32-x64-47 \ binding.node节点Sass无法find您的绑定当前环境:使用Node.js 5.x的Windows 64位发现以下环境的绑定: – 使用Node.js 7.x的64位Windows通常发生这是因为在运行npm install环境已经更改。 运行npm rebuild node-sass来为当前环境构build绑定。

我没有在我的项目文件夹的根目录中运行npm rebuild node-sass ,但仍然得到相同的错误。 这是我运行npm rebuild node-sass

在C:\ Users \ sam \ Documents \ Visual Studio 2017 \ Projects \ MyProject \ MyProject \ node_modules \ node-sass \ vendor \ win32-x64-51 \ binding.nodefind的二进制文件是很好的node-sass@3.13。 1 C:\ Users \ sam \ Documents \ Visual Studio 2017 \ Projects \ MyProject \ MyProject \ node_modules \ node-sass

我的Gulpfile.js看起来像这样:

 var gulp = require('gulp'), sass = require("gulp-sass");; gulp.task('default', function () { // place code for your default task here }); gulp.task("sass", function () { return gulp.src('wwwroot/scss/style.scss') .pipe(sass()) .pipe(gulp.dest('wwwroot/css')); }); 

任何想法如何解决这个问题?

更新:如果我在命令行中运行node -v ,我得到v7.10.0

此外,我发现这篇文章,并按照指示,但问题仍然没有解决,我现在也看到与我的项目鲍尔问题。 这里的文章: https : //ryanhayes.net/synchronize-node-js-install-version-with-visual-studio-2015/

以下是我在项目中看到的内容:

在这里输入图像描述

如果我在Visual Studio中单击“pipe理凉亭软件包”,它只是试图尝试,但似乎无法find已安装的软件包。

更新2:

这里是`package.json':

 { "name": "ingrid", "version": "1.0.0", "description": "Ingrid frontend", "scripts": { "start": "webpack-dev-server --port 43131", "build": "webpack", "build-production": "webpack --process -p" }, "dependencies": { "chart.js": "^2.1.6", "filepicker-js": "^2.4.14", "fine-uploader": "^5.14.2", "fine-uploader-wrappers": "1.0.0", "immutable": "^3.7.6", "imports-loader": "^0.6.5", "moment": "^2.14.1", "object-assign": "4.1.1", "react": "^15.5.4", "react-addons": "^0.9.0", "react-addons-css-transition-group": "^15.5.2", "react-chartjs": "^0.7.3", "react-dom": "^15.5.4", "react-flip-move": "^2.4.1", "react-masonry-component": "^4.1.0", "react-perfect-scrollbar": "^0.1.1", "react-redux": "^4.4.0", "react-tinymce": "^0.4.0", "redux": "^3.3.1", "redux-thunk": "^1.0.3", "tinymce": "^4.4.0" }, "devDependencies": { "babel-cli": "6.23.0", "babel-core": "^6.24.1", "babel-eslint": "7.2.0", "babel-loader": "6.4.1", "babel-plugin-rewire": "1.0.0", "babel-polyfill": "^6.9.0", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.5.0", "babel-preset-stage-2": "^6.22.0", "babel-plugin-syntax-class-properties": "6.13.0", "babel-plugin-transform-class-properties": "6.23.0", "babel-plugin-transform-object-rest-spread": "6.23.0", "css-loader": "0.27.3", "es6-promise": "4.1.0", "eslint": "3.18.0", "eslint-plugin-react": "6.10.3", "extract-text-webpack-plugin": "2.1.0", "exports-loader": "^0.6.3", "gulp": "3.8.11", "gulp-concat": "2.5.2", "gulp-cssmin": "0.1.7", "gulp-sass": "^2.3.2", "gulp-uglify": "1.2.0", "pica": "2.0.8", "react-hot-loader": "^1.3.0", "rimraf": "2.2.8", "style-loader": "^0.18.1", "webpack": "^2.6.1", "webpack-node-externals": "^1.6.0", "webpack-dev-server": "^2.4.5", "whatwg-fetch": "^1.0.0" } } 

 cnpm install gulp-load-plugins --save-dev 

然后修改gulpfile

 var gulp = require('gulp'), sass = require("gulp-sass"), gulpLoadPlugins = require('gulp-load-plugins'), $ = gulpLoadPlugins(); gulp.task('default', function () { // place code for your default task here }); gulp.task("sass", function () { return gulp.src('wwwroot/scss/style.scss') .pipe($.sass()) .pipe(gulp.dest('wwwroot/css')); }); 

这里是与水pipe工,源代码和sass选项吞咽任务的例子。

 var gulp = require('gulp'); var sass = require('gulp-sass'); var plumber = require('gulp-plumber'); var rename = require('gulp-rename'); gulp.task('css', function () { return gulp.src(path.styles) .pipe(plumber()) .pipe(sourcemaps.init('.')) .pipe(sass({outputStyle: 'compressed'}) .on('error', sass.logError)) .pipe(rename(function(path) { path.extname = '.min.css'; })) .pipe(sourcemaps.write('.')) .pipe(gulp.dest('./dist/assets/css')) });