WebStorm，Gulp 无法导入波旁威士忌

Question

我的 WebStorm 2016 IDE 中有以下 gulpfile.js。我的 SCSS 样式表目前驻留在 src/scss/style.scss 中，我在其中完成所有 @import 的操作。

在进行了大量研究并花费数小时试图弄清楚这一点之后，我无法在我的主 scss 文件中执行 @import "bourbon";。我猜测 gulp 文件中的某些内容不正确，其次我的 IDE 在我所做的任何 npm 包导入上都显示了一条红线（这意味着它无法看到 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

以下代码调整让我的 Bourbon 和 Neat 开始通过我的 SCSS 文件中的导入工作。但是，我仍然有一个问题，WebStorm 在 @import "bourbon" 下给我一个红色下划线，在 IDE 中出现错误 "cannot resolve file bourbon"。但是，它正在工作，所以我认为它无法解决正确的路径。如果有人知道解决方案，请发表评论。

        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 2

require('node-neat').includePaths 本身就是一个数组，sass_config 变量中的includePaths 选项应该是一个数组本身，而不是一个数组数组。因此，正如您已经提到的，可能的解决方案是将require('node-neat').includePaths 传递给includePaths 选项，因为它没有方括号，如下所示：

var sass_config = {
    includePaths: require('node-neat').includePaths,
    ...
};

对于传递多个此类数组，您还可以尝试像这样连接它们：

var sass_config = {
    includePaths: [].concat(
        require('node-neat').includePaths,
        require('bourbon').includePaths
    ),
    ...
};

至于WebStorm/PhpStorm在导入库时出错，查看answer by @Shawn Lovelidge。

基本上，您必须遵循以下步骤：

1. 转到File菜单>Settings（或按Ctrl+Alt+S）
2. 点击左侧菜单Directories
3. 右键单击您的node_modules 目录并检查Resource Root 选项
   （或左键单击文件夹并按顶部的Resource Root 按钮）。