Gulp 没有将 scss 转换为 css

Question

在 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()); ^ 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，但仍然出现相同的错误。这是我在运行ning 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.

此外，我找到了这篇文章并按照说明进行操作，但问题仍未解决，我现在也发现我的项目中的 Bower 存在问题。这是文章： https://ryanhayes.net/synchronize-node-js-install-version-with-visual-studio-2015/

这是我在我的项目中看到的：

如果我在 Visual Studio 中单击 "Manage Bower Packages"，它只是试了又试，但似乎找不到已安装的软件包。

更新 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

这里是 gulp 任务示例，其中包含管道工、源地图和 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'))
});

Gulp 没有将 scss 转换为 css

Gulp is not converting scss to css

visual-studio

node.js

npm

gulp

gulp-sass