在Gulp中如何访问node_modules路径以导入Splide.js的CSS文件？

Gulp本身不支持Webpack那种~路径别名机制，要在SCSS里便捷引入node_modules中的资源，需要通过配置SCSS编译任务的includePaths来实现，具体步骤如下：

1. 配置gulp-sass的includePaths #

确保你使用的是gulp-sass插件（基于node-sass或dart-sass均可），在编译SCSS的Gulp任务中，给sass()方法传入includePaths参数，指定node_modules目录的路径：

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass')); // 若使用node-sass则替换为require('node-sass')
const path = require('path');

gulp.task('compile-sass', function() {
  return gulp.src('./src/scss/main.scss')
    // 配置includePaths，让sass自动检索node_modules目录
    .pipe(sass({
      includePaths: [path.join(__dirname, 'node_modules')]
    }).on('error', sass.logError))
    .pipe(gulp.dest('./dist/css'));
});

使用path.join(__dirname, 'node_modules')是为了适配不同操作系统的路径分隔符，避免路径错误。

2. 在main.scss中引入Splide.css #

配置完成后，直接在main.scss中写相对node_modules的路径即可，无需额外前缀：

@import 'splide/dist/css/splide.min.css';

sass会自动从includePaths指定的node_modules目录中查找对应的文件。

常见问题说明 #

• ~是Webpack专属的路径解析规则，Gulp生态没有内置这个逻辑，所以直接使用会被识别为普通路径前缀，导致文件找不到。
• 直接写完整node_modules相对路径失败，通常是因为当前SCSS文件的相对路径计算错误（比如../node_modules/xxx的层级不对），而配置includePaths后，sass会全局检索指定目录，避免了相对路径的层级问题。

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