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

Answer 2

我遇到了这个问题，在我的情况下，它是通过删除文件扩展名来解决的，所以在你的例子中：将'../../node_modules/animate.css/animate.css'更改为'../../node_modules/animate.css/animate'。

gulp-sass似乎无法解决导入问题

2 个答案: