css - gulp-sass 似乎没有解决进口问题

Question

我有一个 main.scss 文件:

@import '../../node_modules/animate.css/animate.css';
@import '../../node_modules/perfect-scrollbar/css/perfect-scrollbar.css';



@import 'abstracts/variables';
@import 'abstracts/mixins';
@import 'abstracts/modifiers';
@import 'abstracts/utilities';

@import 'base/general';
@import 'base/menu-box';
@import 'base/content';
@import 'base/animations';

@import 'components/menu-heading';
@import 'components/close-button';
@import 'components/scrollbar';
@import 'components/introduction';
@import 'components/slides';




@import 'sections/about';
@import 'sections/experience';
@import 'sections/contacts';
@import 'sections/education';

我的 gulp.js 文件中的这两个任务:

gulp.task('sass', () => {
    return gulp.src("./src/scss/main.scss")
        .pipe(sass({includePaths:[
          './node_modules/animate.css/animate.css',
          './node_modules/perfect-scrollbar/css/perfect-scrollbar.css'
        ]}).on('error', sass.logError))
        .pipe(gulp.dest("./src/assets/css"))
        .pipe(browserSync.stream());
});

gulp.task('concat',  () => {
  return gulp.src('./src/assets/css/*.css')
    .pipe(concat("main.css"))
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(autoprefixer({
      browsers:['last 10 versions'],
      cascade:false
    }))
    .pipe(gulp.dest('./src/dist/css'))
    .pipe(browserSync.stream());
});
gulp.task('default', gulp.series('sass','concat','js','HTMLminify','image-compress','serve'));

所以，首先，sass 任务将 main.scss 文件编译成 css，路径 dest 是 './src/assets/src'，然后 concat 任务必须连接新的 main.css 文件(刚刚由 sass 任务创建)和位于同一路径的 ionicons.min.css 并将新文件发送到 dist 文件夹中。

现在我在 concat 任务中遇到错误:

Message:
    Failed to find ../../node_modules/animate.css/animate.css from C:\Users\giaco\Desktop\Resume Box layout\init\src\assets\css\main.css in [
    .,
    C:\Users\giaco\Desktop\Resume Box layout\init\src\assets\css
]
Details:
    domainEmitter: [object Object]
    domain: [object Object]
    domainThrown: false

所以在我看来，sass 任务没有处理导入(即使使用 includePaths 选项)。如果我这样做:

gulp.task('sass', () => {
    return gulp.src("./src/scss/main.scss")
        .pipe(sass().on('error', sass.logError))
        .pipe(cleanCSS({compatibility: 'ie8'}))
        .pipe(gulp.dest("./src/assets/css"))
        .pipe(browserSync.stream());
});

一切正常，但我必须重复 cssClean；也在 concat 任务中，因为只将它留在 sass 任务中将不会得到压缩的 css 文件。

Answer 1

你的 includePaths 不应该直接指向 css

.pipe(sass({
   includePaths: ['./node_modules', './bower_components'],
}).on('error', sass.logError))

并将您的 scss 导入更改为

@import 'animate.css/animate';
@import 'perfect-scrollbar/css/perfect-scrollbar';

这应该将两个 .css 文件导入您的 scss