Question

出于某种原因，我在尝试将ANYTHING导入我的style.scss时遇到错误。我似乎可以弄明白为什么。

我得到的错误是

Error: File to import not found or unreadable: compass
    Parent style sheet: C:/wamp/www/core/themes/default/scss/style.scss
      on line 3 of themes/default/scss/style.scss
>> @import "compass";
   ^

当我尝试导入任何其他文件时，会发生同样的事情。

这是我的主要 style.scss

@import "compass";

@import "modules/functions";

@import "modules/mixins";

@import "modules/variables";

@import "modules/typography";

@import "layout/header";

@import "layout/main";

@import "layout/footer";

@import "layout/sidebar";

@import "layout/offcanvas";

@import "partials/buttons";

@import "partials/forms";

@import "partials/lists";

@import "partials/tables";

@import "layout/site";

我的目录设置如下

core
|--themes
|----default
|------scss
|--------_partials
|--------_modules
|--------_layout

我的 gulpfile.js 位于核心目录

中

var gulp = require('gulp'),
    plumber = require('gulp-plumber'),
    rename = require('gulp-rename');
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin'),
    cache = require('gulp-cache');
var minifycss = require('gulp-minify-css');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');

var theme = "themes/default/"

gulp.task('browser-sync', function() {
  browserSync({

       proxy: "localhost"

  });
});

gulp.task('bs-reload', function () {
  browserSync.reload();
});

gulp.task('images', function(){
  gulp.src(theme + 'images/**/*')
    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    .pipe(gulp.dest(theme + 'images/build/'));
});

gulp.task('styles', function(){
  gulp.src([theme + 'scss/**/*.scss'])
    .pipe(plumber({
      errorHandler: function (error) {
        console.log(error.message);
        this.emit('end');
    }}))
    .pipe(sass())
    .pipe(autoprefixer('last 2 versions'))
    .pipe(gulp.dest('./'))
//   .pipe(rename({suffix: '.min'}))
//   .pipe(minifycss())
//    .pipe(gulp.dest('/'))
    .pipe(browserSync.reload({stream:true}))
});

gulp.task('scripts', function(){
  return gulp.src(theme + 'scripts/**/*.js')
    .pipe(plumber({
      errorHandler: function (error) {
        console.log(error.message);
        this.emit('end');
    }}))
    .pipe(concat('main.js'))
    .pipe(gulp.dest(theme + 'scripts/build/'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest(theme + 'scripts/build/'))
    .pipe(browserSync.reload({stream:true}))
});

gulp.task('default', ['browser-sync'], function(){
  gulp.watch(theme + "scss/**/*.scss", ['styles']);
  gulp.watch(theme + "scripts/**/*.js", ['scripts']);
  gulp.watch(theme + "*.html", ['bs-reload']);
});

我尝试使用compass watch，但我收到同样的错误。

我做错了什么？

Answer 1

gulp-sass 是 node-sass 的包装器，取决于 libsass 引擎。

libsass 和指南针是两种不同的SASS引擎，只要没有名为指南针的模块，就不能在libsass中使用@import "compass";。

如果你想利用Compass提供的mixins，你可以使用这个包：https://www.npmjs.com/package/compass-mixins和@import "compass";应该有效。

为什么我的SCSS @import不能正常工作？

1 个答案: