使用gulp-sass与gulp-cssimport导入第三方CSS失败求助

我刚接触Gulp，之前用gulp-sass编译SCSS代码一直正常。现在需要从node_modules文件夹导入第三方CSS文件（colorbox.css），于是尝试在gulp-sass任务中添加gulp-cssimport，配置代码如下：

var gulp = require('gulp'); 
scss = require('gulp-sass'), 
autoprefixer = require('gulp-autoprefixer'), 
browserSync = require('browser-sync').create(), 
cssImport = require("gulp-cssimport"); 

gulp.task('scss', function () { 
  return gulp.src('./src/scss/**/[^_]*.?(s)css') 
    .pipe(scss({ 
      includePaths: [ 
        'node_modules/slick-carousel/slick', 
        'node_modules/jquery-colorbox/example1/' 
      ] 
    }).on('error', scss.logError)) 
    .pipe(cssImport()) 
    .pipe(autoprefixer({ 
      flexbox: true, 
      grid: true, 
      browsers: ['> 1%', 'last 5 years', 'Firefox > 20'] 
    })) 
    .pipe(gulp.dest('./src/styles')); 
}); 

但操作后没有效果，请问该如何将colorbox.css文件导入已编译好的CSS文件中？

别着急，我来帮你排查问题，给你几个可行的解决思路：

思路1：调整gulp-cssimport的执行顺序 #

你当前是先把SCSS编译成CSS，再执行cssImport，但这个顺序可能有问题——gulp-cssimport是用来识别文件里的@import规则并合并文件的，你可以试试把它放在sass编译之前，让它先处理导入逻辑，再一起参与编译：

gulp.task('scss', function () { 
  return gulp.src('./src/scss/**/[^_]*.?(s)css') 
    .pipe(cssImport()) // 先处理导入操作
    .pipe(scss({ 
      includePaths: [ 
        'node_modules/slick-carousel/slick', 
        'node_modules/jquery-colorbox/example1/' 
      ] 
    }).on('error', scss.logError)) 
    .pipe(autoprefixer({ 
      flexbox: true, 
      grid: true, 
      browsers: ['> 1%', 'last 5 years', 'Firefox > 20'] 
    })) 
    .pipe(gulp.dest('./src/styles')); 
}); 

思路2：直接在SCSS文件中导入CSS（推荐） #

其实不需要额外依赖gulp-cssimport，你可以直接在主SCSS文件里用SCSS原生的@import语法导入第三方CSS，记得加上.css后缀，这样Sass会直接把文件内容复制到编译后的CSS里，不会尝试编译它：
比如在你的主SCSS文件（比如main.scss）中添加：

@import "colorbox.css";

因为你已经在includePaths里配置了node_modules/jquery-colorbox/example1/，Sass会自动去这个路径找colorbox.css，编译后的CSS就会包含这个文件的内容了。

思路3：完善gulp-cssimport的配置 #

如果一定要用gulp-cssimport，可以给它指定includePaths，确保它能正确找到node_modules里的文件：

.pipe(cssImport({
  includePaths: ['node_modules/jquery-colorbox/example1/']
}))

同时要确认你的SCSS/CSS文件里确实写了对应的@import语句：

@import "colorbox.css";

毕竟gulp-cssimport是基于文件里的@import规则工作的，没有这个语句它自然不会生效。

思路4：检查文件路径是否正确 #

最后再确认下node_modules/jquery-colorbox/example1/colorbox.css这个文件是否真的存在——有时候第三方包的文件结构可能和你预想的不一样，比如colorbox.css可能直接在node_modules/jquery-colorbox/根目录下，如果是这样，记得修改includePaths里的路径。

内容的提问来源于stack exchange，提问作者user5718206