我在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']);
});
2条答案
按热度按时间dnph8jn41#
下面的代码调整让我的Bourbon和Neat通过导入我的SCSS文件开始工作。但是,我仍然有一个问题,WebStorm在IDE中的@import“bourbon”下给我一个红色的下划线,错误为“无法解析文件bourbon”。但是,它是工作的,所以我认为它无法解析正确的路径。如果有人知道解决这个问题的方法,请发表评论。
hjzp0vay2#
require('node-neat').includePaths
本身是一个数组,而sass_config
变量中的includePaths
选项应该是一个数组本身,而不是数组的数组。因此,正如你已经提到的,可能的解决方案是直接将require('node-neat').includePaths
传递给includePaths
选项,不带方括号,如下所示:要传递多个此类数组,您也可以尝试将它们连接起来,如下所示:
至于导入库时WebStorm/PhpStorm中的错误,请检查answer by @Shawn Lovelidge。
基本上,您必须遵循以下步骤:
1.转到菜单〉(或按Ctrl+Alt+S)
1.单击左侧菜单中的
Directories
1.右键单击
node_modules
目录并选中Resource Root
选项(or左击文件夹并按顶部的
Resource Root
按钮)。