Gulpがscssをcssに変換していません

Question

Visual Studioでは、scssファイルをcssに変換するためにGulpが実行されていません。

私は取得していますエラーがある：私は私のプロジェクトフォルダのルートにnpm rebuild node-sassを実行しますが、それでも同じエラーを取得しなかった

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()); ^Error: Missing binding C:\Users\sam\Documents\Visual Studio 2017\Projects\MyProject\MyProject\node_modules\node-sass\vendor\win32-x64-47\binding.node Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 5.x Found bindings for the following environments: - Windows 64-bit with Node.js 7.x This usually happens because your environment has changed since running npm install . Run npm rebuild node-sass to build the binding for your current environment.

。これは私がnpm rebuild node-sassを実行した後に得たものである：私はこの問題を解決する方法を

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')); 
}); 

任意のアイデア：

Binary found at C:\Users\sam\Documents\Visual Studio 2017\Projects\MyProject\MyProject\node_modules\node-sass\vendor\win32-x64-51\binding.node Testing binary Binary is fine node-sass@3.13.1 C:\Users\sam\Documents\Visual Studio 2017\Projects\MyProject\MyProject\node_modules\node-sass

私Gulpfile.jsは、このようになりますか？

更新： コマンドラインでnode -vを実行すると、v7.10.0と表示されます。

また、私はこの記事を見つけて指示に従っていますが、問題はまだ解決されておらず、私のプロジェクトではBowerの問題も見ています。 がここに記事です： https://ryanhayes.net/synchronize-node-js-install-version-with-visual-studio-2015/

そして、ここだ、私は私のプロジェクトで見ている何を：私は、Visual Studioで「バウアーパッケージの管理」をクリックした場合

、それだけしようとしようとしますが、インストールされたパッケージが見つからないようです。

UPDATE 2：ここでは

は `package.json"です：配管工、sourcemapsで一気タスクの例は

{ 
    "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" 
    } 
} 

Answer 1

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')); 
}); 

Answer 2

変更ですと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')) 
});