Gulp không chuyển đổi scss sang css

Question

Trong Visual Studio, Gulp không chạy để chuyển đổi các tệp scss của tôi thành css.

Các lỗi tôi nhận được là:

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.

Tôi đã chạy npm rebuild node-sass trong thư mục gốc của thư mục dự án của tôi, nhưng vẫn nhận được lỗi tương tự. Đây là những gì tôi nhận được sau khi chạy npm rebuild node-sass:

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 của tôi trông như thế này:

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

Bất kỳ ý tưởng làm thế nào tôi có thể khắc phục vấn đề này?

CẬP NHẬT: Nếu tôi chạy node -v trong dòng lệnh, tôi nhận được v7.10.0.

Ngoài ra, tôi đã tìm thấy bài viết này và làm theo hướng dẫn nhưng vấn đề vẫn chưa được giải quyết và hiện tôi cũng đang gặp sự cố với Bower trong dự án của tôi. Dưới đây là bài viết: https://ryanhayes.net/synchronize-node-js-install-version-with-visual-studio-2015/

Và đây là những gì tôi nhìn thấy trong dự án của tôi:

Nếu tôi nhấp vào "Manage Bower gói" trong Visual Studio, nó chỉ cố gắng và cố gắng nhưng dường như không thể tìm thấy các gói đã cài đặt.

UPDATE 2:

Đây là '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" 
    } 
} 

Answer 1

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

và sau đó sửa đổi 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

Dưới đây là ví dụ về nhiệm vụ ngụm với thợ sửa ống nước, sourcemaps và các tùy chọn 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')) 
});