WebStorm, Gulp는 버번을 가져올 수 없습니다.

Question

WebStorm 2016 IDE에 다음과 같은 gulpfile.js이 있습니다. 내 SCSS 스타일 시트는 현재 내 모든 @ 가져 오기를 수행하는 src/scss/style.scss에 있습니다.

연구를 수행하고이를 파악하는 데 많은 시간을 투자 한 후 @import "bourbon";을 내 주된 scss 파일에 넣을 수 없습니다. 내가 꿀꺽 꿀꺽 파일에서 뭔가 잘못되었다고 추측하고 있는데, 두 번째 IDE는 npm 패키지 가져 오기에서 redline을 보여줍니다 (즉, node_modules에 대한 올바른 경로를 볼 수 없음을 의미).

누구나 구성 방법을 알아 냈습니까? 도움이된다면 고맙습니다. 감사합니다.

gulfile.js

var gulp = require('gulp'), 
     sass = require('gulp-sass'), 
     browserSync = require('browser-sync'), 
     autoprefixer = require('gulp-autoprefixer'), 
     uglify = require('gulp-uglify'), 
     jshint = require('gulp-jshint'), 
     header = require('gulp-header'), 
     rename = require('gulp-rename'), 
     cssnano = require('gulp-cssnano'), 
     package = require('./package.json'); 

    var paths = { 
     scss: './src/scss/*.scss' 
    }; 

    var sass_config = { // THE INCLUDES FOR BOTH PROD AND DEV 
     includePaths: [ 
     require('node-neat').includePaths 
     ], 
     style: 'compressed', 
     quiet: true, 
     sourcemap: true 
    }; 

    var banner = [ 
     '/*!\n' + 
     ' * <%= package.name %>\n' + 
     ' * <%= package.title %>\n' + 
     ' * <%= package.url %>\n' + 
     ' * @author <%= package.author %>\n' + 
     ' * @version <%= package.version %>\n' + 
     ' * Copyright ' + new Date().getFullYear() + '. <%= package.license %> licensed.\n' + 
     ' */', 
     '\n' 
    ].join(''); 

    gulp.task('css', function() { 
     return gulp.src(paths.scss) 
     .pipe(sass(sass_config).on('error', sass.logError)) 
     .pipe(autoprefixer('last 4 version')) 
     .pipe(gulp.dest('app/assets/css')) 
     .pipe(cssnano()) 
     .pipe(rename({ suffix: '.min' })) 
     .pipe(header(banner, { package : package })) 
     .pipe(gulp.dest('app/assets/css')) 
     .pipe(browserSync.reload({stream:true})); 
    }); 

    gulp.task('js',function(){ 
     gulp.src('src/js/scripts.js') 
     .pipe(jshint('.jshintrc')) 
     .pipe(jshint.reporter('default')) 
     .pipe(header(banner, { package : package })) 
     .pipe(gulp.dest('app/assets/js')) 
     .pipe(uglify()) 
     .pipe(header(banner, { package : package })) 
     .pipe(rename({ suffix: '.min' })) 
     .pipe(gulp.dest('app/assets/js')) 
     .pipe(browserSync.reload({stream:true, once: true})); 
    }); 

    gulp.task('browser-sync', function() { 
     browserSync.init(null, { 
      server: { 
       baseDir: "app" 
      } 
     }); 
    }); 
    gulp.task('bs-reload', function() { 
     browserSync.reload(); 
    }); 

    gulp.task('default', ['css', 'js', 'browser-sync'], function() { 
     gulp.watch("src/scss/*/*.scss", ['css']); 
     gulp.watch("src/js/*.js", ['js']); 
     gulp.watch("app/*.html", ['bs-reload']); 
    }); 

Answer 1

다음 코드 팅겨 내 부르봉 왕가를 가지고와 깔끔한 내 SCSS 파일의 수입을 통해 작업을 시작합니다. 그러나 WebStorm에서 여전히 @import "bourbon"아래에 빨간색 밑줄을 주며 IDE에서 "파일 버번을 해결할 수 없습니다"라는 오류가 있습니다. 그러나, 그것은 작동하고 그래서 나는 어떻게 든 그것이 올바른 길을 해결할 수 없다고 생각하고있다. 누구든지 그 해결책을 알고 있다면 의견을주십시오.

 var gulp = require('gulp'), 
      sass = require('gulp-sass'), 
      browserSync = require('browser-sync'), 
      autoprefixer = require('gulp-autoprefixer'), 
      uglify = require('gulp-uglify'), 
      jshint = require('gulp-jshint'), 
      header = require('gulp-header'), 
      rename = require('gulp-rename'), 
      cssnano = require('gulp-cssnano'), 
      package = require('./package.json'); 

     var paths = { 
      scss: 'src/scss/*.scss' 
     }; 

     var sass_config = { // THE INCLUDES FOR BOTH PROD AND DEV 
      includePaths: require('node-neat').includePaths, 
      style: 'compressed', 
      quiet: true, 
      sourcemap: true 
     }; 

     var banner = [ 
      '/*!\n' + 
      ' * <%= package.name %>\n' + 
      ' * <%= package.title %>\n' + 
      ' * <%= package.url %>\n' + 
      ' * @author <%= package.author %>\n' + 
      ' * @version <%= package.version %>\n' + 
      ' * Copyright ' + new Date().getFullYear() + '. <%= package.license %> licensed.\n' + 
      ' */', 
      '\n' 
     ].join(''); 

     gulp.task('css', function() { 
      return gulp.src(paths.scss) 
      .pipe(sass(sass_config).on('error', sass.logError)) 
      .pipe(autoprefixer('last 4 version')) 
      .pipe(gulp.dest('app/assets/css')) 
      .pipe(cssnano()) 
      .pipe(rename({ suffix: '.min' })) 
      .pipe(header(banner, { package : package })) 
      .pipe(gulp.dest('app/assets/css')) 
      .pipe(browserSync.reload({stream:true})); 
     }); 

     gulp.task('js',function(){ 
      gulp.src('src/js/scripts.js') 
      .pipe(jshint('.jshintrc')) 
      .pipe(jshint.reporter('default')) 
      .pipe(header(banner, { package : package })) 
      .pipe(gulp.dest('app/assets/js')) 
      .pipe(uglify()) 
      .pipe(header(banner, { package : package })) 
      .pipe(rename({ suffix: '.min' })) 
      .pipe(gulp.dest('app/assets/js')) 
      .pipe(browserSync.reload({stream:true, once: true})); 
     }); 

     gulp.task('browser-sync', function() { 
      browserSync.init(null, { 
       server: { 
        baseDir: "app" 
       } 
      }); 
     }); 
     gulp.task('bs-reload', function() { 
      browserSync.reload(); 
     }); 

     gulp.task('default', ['css', 'js', 'browser-sync'], function() { 
      gulp.watch("src/scss/**/*.scss", ['css']); 
      gulp.watch("src/js/*.js", ['js']); 
      gulp.watch("app/*.html", ['bs-reload']); 
     });