Sass 要导入的文件找不到或不可读:";罗盘;

Sass 要导入的文件找不到或不可读:";罗盘;,sass,gruntjs,compass,Sass,Gruntjs,Compass,当我试图运行“grunt”任务时,我收到错误“找不到要导入的文件”或“compass”“无法读取” 正在运行“sass:app”(sass)任务 警告:build/global/css/base:1:要导入的文件找不到或不可读:“compass” 这是我的Grunfile文件: module.exports = function(grunt) { // COMMANDS // comple css and js - $ grunt // optim - run $ grunt imgo

当我试图运行“grunt”任务时,我收到错误“找不到要导入的文件”或“compass”“无法读取”

正在运行“sass:app”(sass)任务 警告:build/global/css/base:1:要导入的文件找不到或不可读:“compass”

这是我的Grunfile文件:

module.exports = function(grunt) { 

//  COMMANDS

// comple css and js - $ grunt
// optim -  run $ grunt imgoptim

//  FILE STRUCTURE

//  css/app.css, css/app.min.css
//      build/global/css/*.scss
//      build/global/css/**/*.scss
//      build/components/componentname/css/*.scss

//  css/singlefile.css, css/singlefile.min.css
//      build/global/solo/css/*.scss

//  js/app.js, js/app.min.css
//      build/global/js/*.js
//      build/global/js/**/*.js
//      build/components/componentname/js/*.js

//  singlefile.js, singlefile.min.js
//      build/global/solo/js/*.js

var watch = {};
var uglify = {};
var concat = {};
var sass = {};
var cssmin = {};

var js_files = [
    'build/global/js/vendor/respond.js',
    'build/global/js/vendor/AccessifyHTML5.js',
    'build/global/js/vendor/jquery.equalHeights.js',
    'build/global/js/vendor/jquery.infinitescroll.js',
    'build/global/js/vendor/jquery.verticalcentering.js',
    'build/global/js/global.js',
    'build/components/**/js/vendor/*.js',
    'build/components/**/js/*.js'
];

// WATCH =========================================/

watch.solocss = {
    options: { livereload: true }, // currently not working correctly, should be able to remove this line
    livereload: {
        options: { livereload: true },
        files: ['css/*.css', '!css/*.min.css']
    },
    files: 'build/solo/css/*.scss',
    tasks: [
        'newer:sass:solo'
    ]
};

watch.appcss = {
    options: { livereload: true }, // currently not working correctly, should be able to remove this line
    livereload: {
        options: { livereload: true },
        files: ['css/*.css', '!css/*.min.css']
    },
    files: [
        'build/global/css/**/*.scss', 
        'build/global/css/*.scss',
        'build/components/**/*.scss'
    ],
    tasks: [
        'sass:app',
        'concat:appcss',
        'sass:solo' // run solo here too incase there are changes to sass vars etc
    ]
};

watch.cssmin = {
    files: ['css/*.css', '!css/*.min.css'],
    tasks: [
        'newer:cssmin:compress',
    ]
};

watch.solojs = {
    options: { livereload: true }, // currently not working correctly, should be able to remove this line
    livereload: {
        options: { livereload: true },
        files: ['js/*.js', '!js/*.min.js']
    },
    files: 'build/solo/js/*.js',
    tasks: [
        'newer:uglify:solojsdev',
        'newer:uglify:solojsprod'
    ]
};

watch.globaljs = {
    options: { livereload: true }, // currently not working correctly, should be able to remove this line
    livereload: {
        options: { livereload: true },
        files: ['js/*.js', '!js/*.min.js']
    },
    files: ['build/global/js/*.js', 'build/global/js/**/*.js', 'build/components/**/*.js'],
    tasks: [
        'concat:appjs',
        'uglify:appjs'
    ]
};

// CSS COMPLILATION ====================================/

//solo files, compiled to /css/file.css
sass.solo = {
    options:{
        includePaths: require('node-bourbon').with('build'),
        sourceComments: true,
        style: 'expanded', // compile in expanded format with comments for dev,
        compass: true
    },
    files: [{
      expand: true,
      src: watch.solocss.files, // where it's coming from
      dest: 'css', // where it's going
      flatten: true, // removes folder tree
      ext: '.css', // what file extension to give it - standard
      extDot: 'last'
    }]
};

// app scss files, compiled individually to /css/build/...
sass.app = {
    options:{
        includePaths: require('node-bourbon').with('build'),
        style: 'expanded', // compile in expanded format with comments for dev
        sourceComments: 'normal',
    },
    files: [{
        //cwd: 'build',
      expand: true,
      src: watch.appcss.files, // where it's coming from
      dest: 'css', // where it's going
      ext: '.css' // what file extension to give it - standard
    }]
};

// concat app.css files
concat.appcss = {
    src: [
        'css/build/global/css/**/*.css', 
        'css/build/global/css/*.css',
        'css/build/components/**/*.css'
    ],
    dest: 'css/app.css',
    seperator: '\n'
};

// create compressed version of all css files for prod
cssmin.compress = {
    files: [{
      expand: true,
      cwd: 'css/',
      src: ['*.css', '!*.min.css', '!editor.css'],
      dest: 'css/',
      ext: '.min.css',
      extDot: 'last'
    }]
}

// JAVASCRIPT COMPLILATION ============================/

// concat app.js files
concat.appjs = {
    src: js_files,
    dest: 'js/app.js',
    separator: ';'
};

// minify app.js
uglify.appjs = {
    files: {
        'js/app.min.js': [
            'js/app.js'
        ]
    }
};

// uglify solo files for dev
uglify.solojsdev = {
    options: {
        compress: false,
        mangle: false,
        beautify: true
    },
    files: [{
        expand: true,
        flatten: true, // removes folder tree
        src: watch.solojs.files,
        dest: 'js/'
    }]
};

// uglify + minify solo files for prod
uglify.solojsprod = {
    options: {
        compress: true
    },
    files: [{
        expand: true,
        flatten: true, // removes folder tree
        src: watch.solojs.files,
        dest: 'js/',
        ext: '.min.js',
        extDot: 'last',
    }]
};


// IMAGE OPTIMISATION ==========================/

imageoptim = {
  optimise: {
    src: ['images']
  }
}

// GRUNT ======================================/

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    watch: watch,
    sass: sass,
    concat: concat,
    cssmin: cssmin,
    uglify: uglify,
    imageoptim: imageoptim
});

// DEPENDENT PLUGINS =========================/

grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-imageoptim');
grunt.loadNpmTasks('grunt-newer');

// TASKS =====================================/

grunt.registerTask('default', [
    'sass',
    'concat',
    'newer:cssmin',
    'newer:uglify', 
    'watch'
]);

grunt.registerTask('imgoptim', [
    'imageoptim'
]);
}
http_path = "/"
css_dir = "css"
sass_dir = "build"
images_dir = "images"
javascripts_dir = "javascript"
我的目录结构类似于gruntfile.js中的以下相对结构:

/build/global/components/FOLDERS/*.scss文件

/构建/global/css/FOLDERS&*.scss文件

/dist/*.css文件

这是我的config.rb文件,与GrunFile位于同一目录中:

module.exports = function(grunt) { 

//  COMMANDS

// comple css and js - $ grunt
// optim -  run $ grunt imgoptim

//  FILE STRUCTURE

//  css/app.css, css/app.min.css
//      build/global/css/*.scss
//      build/global/css/**/*.scss
//      build/components/componentname/css/*.scss

//  css/singlefile.css, css/singlefile.min.css
//      build/global/solo/css/*.scss

//  js/app.js, js/app.min.css
//      build/global/js/*.js
//      build/global/js/**/*.js
//      build/components/componentname/js/*.js

//  singlefile.js, singlefile.min.js
//      build/global/solo/js/*.js

var watch = {};
var uglify = {};
var concat = {};
var sass = {};
var cssmin = {};

var js_files = [
    'build/global/js/vendor/respond.js',
    'build/global/js/vendor/AccessifyHTML5.js',
    'build/global/js/vendor/jquery.equalHeights.js',
    'build/global/js/vendor/jquery.infinitescroll.js',
    'build/global/js/vendor/jquery.verticalcentering.js',
    'build/global/js/global.js',
    'build/components/**/js/vendor/*.js',
    'build/components/**/js/*.js'
];

// WATCH =========================================/

watch.solocss = {
    options: { livereload: true }, // currently not working correctly, should be able to remove this line
    livereload: {
        options: { livereload: true },
        files: ['css/*.css', '!css/*.min.css']
    },
    files: 'build/solo/css/*.scss',
    tasks: [
        'newer:sass:solo'
    ]
};

watch.appcss = {
    options: { livereload: true }, // currently not working correctly, should be able to remove this line
    livereload: {
        options: { livereload: true },
        files: ['css/*.css', '!css/*.min.css']
    },
    files: [
        'build/global/css/**/*.scss', 
        'build/global/css/*.scss',
        'build/components/**/*.scss'
    ],
    tasks: [
        'sass:app',
        'concat:appcss',
        'sass:solo' // run solo here too incase there are changes to sass vars etc
    ]
};

watch.cssmin = {
    files: ['css/*.css', '!css/*.min.css'],
    tasks: [
        'newer:cssmin:compress',
    ]
};

watch.solojs = {
    options: { livereload: true }, // currently not working correctly, should be able to remove this line
    livereload: {
        options: { livereload: true },
        files: ['js/*.js', '!js/*.min.js']
    },
    files: 'build/solo/js/*.js',
    tasks: [
        'newer:uglify:solojsdev',
        'newer:uglify:solojsprod'
    ]
};

watch.globaljs = {
    options: { livereload: true }, // currently not working correctly, should be able to remove this line
    livereload: {
        options: { livereload: true },
        files: ['js/*.js', '!js/*.min.js']
    },
    files: ['build/global/js/*.js', 'build/global/js/**/*.js', 'build/components/**/*.js'],
    tasks: [
        'concat:appjs',
        'uglify:appjs'
    ]
};

// CSS COMPLILATION ====================================/

//solo files, compiled to /css/file.css
sass.solo = {
    options:{
        includePaths: require('node-bourbon').with('build'),
        sourceComments: true,
        style: 'expanded', // compile in expanded format with comments for dev,
        compass: true
    },
    files: [{
      expand: true,
      src: watch.solocss.files, // where it's coming from
      dest: 'css', // where it's going
      flatten: true, // removes folder tree
      ext: '.css', // what file extension to give it - standard
      extDot: 'last'
    }]
};

// app scss files, compiled individually to /css/build/...
sass.app = {
    options:{
        includePaths: require('node-bourbon').with('build'),
        style: 'expanded', // compile in expanded format with comments for dev
        sourceComments: 'normal',
    },
    files: [{
        //cwd: 'build',
      expand: true,
      src: watch.appcss.files, // where it's coming from
      dest: 'css', // where it's going
      ext: '.css' // what file extension to give it - standard
    }]
};

// concat app.css files
concat.appcss = {
    src: [
        'css/build/global/css/**/*.css', 
        'css/build/global/css/*.css',
        'css/build/components/**/*.css'
    ],
    dest: 'css/app.css',
    seperator: '\n'
};

// create compressed version of all css files for prod
cssmin.compress = {
    files: [{
      expand: true,
      cwd: 'css/',
      src: ['*.css', '!*.min.css', '!editor.css'],
      dest: 'css/',
      ext: '.min.css',
      extDot: 'last'
    }]
}

// JAVASCRIPT COMPLILATION ============================/

// concat app.js files
concat.appjs = {
    src: js_files,
    dest: 'js/app.js',
    separator: ';'
};

// minify app.js
uglify.appjs = {
    files: {
        'js/app.min.js': [
            'js/app.js'
        ]
    }
};

// uglify solo files for dev
uglify.solojsdev = {
    options: {
        compress: false,
        mangle: false,
        beautify: true
    },
    files: [{
        expand: true,
        flatten: true, // removes folder tree
        src: watch.solojs.files,
        dest: 'js/'
    }]
};

// uglify + minify solo files for prod
uglify.solojsprod = {
    options: {
        compress: true
    },
    files: [{
        expand: true,
        flatten: true, // removes folder tree
        src: watch.solojs.files,
        dest: 'js/',
        ext: '.min.js',
        extDot: 'last',
    }]
};


// IMAGE OPTIMISATION ==========================/

imageoptim = {
  optimise: {
    src: ['images']
  }
}

// GRUNT ======================================/

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    watch: watch,
    sass: sass,
    concat: concat,
    cssmin: cssmin,
    uglify: uglify,
    imageoptim: imageoptim
});

// DEPENDENT PLUGINS =========================/

grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-imageoptim');
grunt.loadNpmTasks('grunt-newer');

// TASKS =====================================/

grunt.registerTask('default', [
    'sass',
    'concat',
    'newer:cssmin',
    'newer:uglify', 
    'watch'
]);

grunt.registerTask('imgoptim', [
    'imageoptim'
]);
}
http_path = "/"
css_dir = "css"
sass_dir = "build"
images_dir = "images"
javascripts_dir = "javascript"

我已经安装了compass和所有的node_模块。

你使用了错误的插件:grunt sass说它使用LibSass,但compass需要官方的Ruby sass。啊,我应该改用它吗?