Gulp scss'i css'ye dönüştürmüyor

Question

Visual Studio'da, Gulp scss dosyamı css'a dönüştürmek için çalışmıyor.

alıyorum hatadır: Benim proje klasöründe kök npm rebuild node-sass çalıştırmak ama yine aynı hata almaya vermedi

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.

. Bu benim npm rebuild node-sass çalıştırdıktan sonra ne var:

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 şöyle My:

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

herhangi bir fikir bu sorunu nasıl çözeceğinizi?

GÜNCELLEME: node -v komut satırında çalıştırırsam, v7.10.0 alırım.

Ayrıca, bu makaleyi buldum ve yönergeleri takip ettim, ancak sorun hala çözülmedi ve şu anda projemde Bower ile ilgili bir sorun görüyorum. İşte makale: https://ryanhayes.net/synchronize-node-js-install-version-with-visual-studio-2015/

Ve burada Projemde gördüğümü: Visual Studio "Bower Paketleri Yönetin" tıklarsanız

, sadece çalışır ve çalışır ancak yüklü paketleri bulamıyor gibi görünmüyor.

GÜNCELLEME 2: Burada

`package.json 'var: tesisatçı sourcemaps ile yutkunmak görevin örnek

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

ve sonra gulpfile İşte

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

değiştirmek olduğunu ve sass seçenekleri.

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