我的WebStorm 2016 IDE中有以下gulpfile.js。我的 SCSS 样式表目前驻留在src/scss/style.scss，我在那里做我所有的@import。
在做了大量的研究并花费数小时试图解决这个问题之后，我无法在我的主 scss 文件中做@import "bourbon";。我猜测gulp文件中的某些内容不正确，其次我的IDE在我所做的任何npm包导入上都显示一条红线（这意味着它无法看到node_modules的正确路径）。
有没有人能够弄清楚如何配置它？任何帮助不胜感激，谢谢。
古尔菲尔.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']);
});
以下代码调整让我的波旁威士忌和整洁开始通过导入我的 SCSS 文件工作。但是，WebStorm 在 IDE 中@import"波旁威士忌"下给我一个红色下划线，错误为"无法解析文件波旁威士忌"，我仍然遇到问题。但是，它正在工作，所以我认为它无法以某种方式解决正确的路径。如果有人知道解决方案，请发表评论。
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']);
});
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 中的错误，请通过 @Shawn Lovelidge 检查答案。
基本上，您必须按照以下步骤操作：
- 转到
File菜单>Settings（或按 Ctrl+Alt+S） - 单击左侧菜单上的
Directories - 右键单击您的
node_modules目录并选中Resource Root选项
（或左键单击文件夹，然后按顶部的Resource Root按钮）。