使用 Gulp-SASS 从 node_modules 导入 CSS答案

【问题标题】：Import CSS from node_modules using Gulp-SASS使用 Gulp-SASS 从 node_modules 导入 CSS
【发布时间】：2017-11-17 00:31:40
【问题描述】：

我想使用 SASS 从我的node_modules 导入一个 CSS 文件。

@import 'normalize.css/normalize';

这就是我的gulpfile.js 处理我的 SASS 的方式：

const
  gulp = require('gulp'),
  sass = require('gulp-sass');

gulp.task('sass', function () {
  return gulp.src(['source/assets/css/**.scss', '!source/assets/css/**/_*.[scss|sass'])
    .pipe(sass())
    .pipe(gulp.dest('output/assets/css'));
});

SASS 编译器不会从 node_modules 导入 css。相反，这会引发错误。

Error: File to import not found or unreadable: normalize.css/normalize.

【问题讨论】：

标签： npm sass gulp

【解决方案1】：

SASS 编译器不知道在哪里查找文件。需要指定位置。

gulp.task('sass', function () {
  return gulp.src(['source/assets/css/**.scss', '!source/assets/css/**/_*.[scss|sass'])
    .pipe(sass({
      includePaths: ['node_modules']
    }))
    .pipe(gulp.dest('output/assets/css'));
});

【讨论】：

【解决方案2】：

2020 年对我有用的是：

function styles() {
    return (
      gulp.src(paths.styles.src)
        .pipe(sourcemaps.init())
        .pipe(sass({
                    includePaths: ['./node_modules/purecss-sass/vendor/assets/stylesheets/',
                                  './node_modules/modularscale-sass/stylesheets/',
                                  './node_modules/typi/scss/'
                                  ]
                  }))
        .on("error", sass.logError)
        .pipe(postcss([autoprefixer(), cssnano()]))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(paths.styles.dest))
        .pipe(browserSync.stream())
    );
}

现在在 scss 文件中，我可以

@import 'modularscale';
@import 'typi';
@import 'purecss';

其他选项似乎是：

将主 _somelibrary.scss 文件的完整路径直接放在 scss 文件中（减去扩展名），如下所示：

@import '../../node_modules/purecss-sass/vendor/assets/stylesheets/_purecss';

输入includePaths: ['./node_modules']，并在scss文件中添加相对路径：

@import 'purecss-sass/vendor/assets/stylesheets/_purecss';

【讨论】：