गुलपी एसएसएस

Question

विजुअल स्टूडियो में परिवर्तित नहीं हो रहा है, गुलप 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()); ^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 चलाने था, लेकिन अब भी वही त्रुटि हो रही है। यह है कि मैं क्या 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 इस तरह दिखता है:

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/

और यहाँ क्या मैं अपने प्रोजेक्ट में दिखाई दे रही है:

अगर मैं क्लिक करें दृश्य स्टूडियो में "बोवर संकुल प्रबंधित करें", यह सिर्फ कोशिश करता है और कोशिश करता है लेकिन स्थापित संकुल नहीं ढूंढ रहे हैं।

अद्यतन 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" 
    } 
} 

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

यहाँ संशोधित प्लंबर, sourcemaps साथ घूंट कार्य का उदाहरण है और एसएएस विकल्प।

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