我正在使用 Compass 框架构建我的 css 文件。 我在 app/styles 中创建了一个新的 .scss 文件 test.scss 与 main.scss 分开。

在使用 grunt build 时，我所有的 .scss 文件都已编译为 css 并在 .tmp 文件夹中创建，但仅main.css 被移动到 dist/style。我的 test.css 文件没有移动。

Grunt 文件:

// Generated on 2014-04-01 using generator-webapp 0.4.7 
'use strict'; 
 
// # Globbing 
// for performance reasons we're only matching one level down: 
// 'test/spec/{,*/}*.js' 
// use this if you want to recursively match all subfolders: 
// 'test/spec/**/*.js' 
 
module.exports = function (grunt) { 
 
// Load grunt tasks automatically 
require('load-grunt-tasks')(grunt); 
 
// Time how long tasks take. Can help when optimizing build times 
require('time-grunt')(grunt); 
 
// Define the configuration for all the tasks 
grunt.initConfig({ 
 
    // Project settings 
    yeoman: { 
        // Configurable paths 
        app: 'app', 
        dist: 'dist' 
    }, 
 
    // Watches files for changes and runs tasks based on the changed files 
    watch: { 
        js: { 
            files: ['<%= yeoman.app %>/scripts/{,*/}*.js'], 
            tasks: ['jshint'], 
            options: { 
                livereload: true 
            } 
        }, 
        jstest: { 
            files: ['test/spec/{,*/}*.js'], 
            tasks: ['test:watch'] 
        }, 
        gruntfile: { 
            files: ['Gruntfile.js'] 
        }, 
        compass: { 
            files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'], 
            tasks: ['compass:server', 'autoprefixer'] 
        }, 
        styles: { 
            files: ['<%= yeoman.app %>/styles/{,*/}*.css'], 
            tasks: ['newer:copy:styles', 'autoprefixer'] 
        }, 
        livereload: { 
            options: { 
                livereload: '<%= connect.options.livereload %>' 
            }, 
            files: [ 
                '<%= yeoman.app %>/{,*/}*.html', 
                '.tmp/styles/{,*/}*.css', 
                '<%= yeoman.app %>/images/{,*/}*.{gif,jpeg,jpg,png,svg,webp}' 
            ] 
        } 
    }, 
 
    // The actual grunt server settings 
    connect: { 
        options: { 
            port: 9000, 
            livereload: 35729, 
            // Change this to '0.0.0.0' to access the server from outside 
            hostname: 'localhost' 
        }, 
        livereload: { 
            options: { 
                open: true, 
                base: [ 
                    '.tmp', 
                    '<%= yeoman.app %>' 
                ] 
            } 
        }, 
        test: { 
            options: { 
                port: 9001, 
                base: [ 
                    '.tmp', 
                    'test', 
                    '<%= yeoman.app %>' 
                ] 
            } 
        }, 
        dist: { 
            options: { 
                open: true, 
                base: '<%= yeoman.dist %>', 
                livereload: false 
            } 
        } 
    }, 
 
    // Empties folders to start fresh 
    clean: { 
        dist: { 
            files: [{ 
                dot: true, 
                src: [ 
                    '.tmp', 
                    '<%= yeoman.dist %>/*', 
                    '!<%= yeoman.dist %>/.git*' 
                ] 
            }] 
        }, 
        server: '.tmp' 
    }, 
 
    // Make sure code styles are up to par and there are no obvious mistakes 
    jshint: { 
        options: { 
            jshintrc: '.jshintrc', 
            reporter: require('jshint-stylish') 
        }, 
        all: [ 
            'Gruntfile.js', 
            '<%= yeoman.app %>/scripts/{,*/}*.js', 
            '!<%= yeoman.app %>/scripts/vendor/*', 
            'test/spec/{,*/}*.js' 
        ] 
    }, 
 
 
    // Mocha testing framework configuration options 
    mocha: { 
        all: { 
            options: { 
                run: true, 
                urls: ['http://<%= connect.test.options.hostname %>:<%= connect.test.options.port %>/index.html'] 
            } 
        } 
    }, 
 
    // Compiles Sass to CSS and generates necessary files if requested 
    compass: { 
        options: { 
            sassDir: '<%= yeoman.app %>/styles', 
            cssDir: '.tmp/styles', 
            generatedImagesDir: '.tmp/images/generated', 
            imagesDir: '<%= yeoman.app %>/images', 
            javascriptsDir: '<%= yeoman.app %>/scripts', 
            fontsDir: '<%= yeoman.app %>/styles/fonts', 
            importPath: '<%= yeoman.app %>/bower_components', 
            httpImagesPath: '/images', 
            httpGeneratedImagesPath: '/images/generated', 
            httpFontsPath: '/styles/fonts', 
            relativeAssets: false, 
            assetCacheBuster: false 
        }, 
        dist: { 
            options: { 
                generatedImagesDir: '<%= yeoman.dist %>/images/generated' 
            } 
        }, 
        server: { 
            options: { 
                debugInfo: true 
            } 
        } 
    }, 
 
    // Add vendor prefixed styles 
    autoprefixer: { 
        options: { 
            browsers: ['last 2 version', 'ie 8', 'ie 9'] 
        }, 
        dist: { 
            files: [{ 
                expand: true, 
                cwd: '.tmp/styles/', 
                src: '{,*/}*.css', 
                dest: '.tmp/styles/' 
            }] 
        } 
    }, 
 
    // Automatically inject Bower components into the HTML file 
    'bower-install': { 
        app: { 
            html: '<%= yeoman.app %>/index.html', 
            ignorePath: '<%= yeoman.app %>/' 
        } 
    }, 
 
    // Renames files for browser caching purposes 
    rev: { 
        dist: { 
            files: { 
                src: [ 
                    '<%= yeoman.dist %>/scripts/{,*/}*.js', 
                    '<%= yeoman.dist %>/styles/{,*/}*.css', 
                    '<%= yeoman.dist %>/images/{,*/}*.{gif,jpeg,jpg,png,webp}', 
                    '<%= yeoman.dist %>/styles/fonts/{,*/}*.*' 
                ] 
            } 
        } 
    }, 
 
    // Reads HTML for usemin blocks to enable smart builds that automatically 
    // concat, minify and revision files. Creates configurations in memory so 
    // additional tasks can operate on them 
    useminPrepare: { 
        options: { 
            dest: '<%= yeoman.dist %>' 
        }, 
        html: '<%= yeoman.app %>/index.html' 
    }, 
 
    // Performs rewrites based on rev and the useminPrepare configuration 
    usemin: { 
        options: { 
            assetsDirs: ['<%= yeoman.dist %>'] 
        }, 
        html: ['<%= yeoman.dist %>/{,*/}*.html'], 
        css: ['<%= yeoman.dist %>/styles/{,*/}*.css'] 
    }, 
 
    // The following *-min tasks produce minified files in the dist folder 
    imagemin: { 
        dist: { 
            files: [{ 
                expand: true, 
                cwd: '<%= yeoman.app %>/images', 
                src: '{,*/}*.{gif,jpeg,jpg,png}', 
                dest: '<%= yeoman.dist %>/images' 
            }] 
        } 
    }, 
    svgmin: { 
        dist: { 
            files: [{ 
                expand: true, 
                cwd: '<%= yeoman.app %>/images', 
                src: '{,*/}*.svg', 
                dest: '<%= yeoman.dist %>/images' 
            }] 
        } 
    }, 
    htmlmin: { 
        dist: { 
            options: { 
                collapseBooleanAttributes: true, 
                collapseWhitespace: true, 
                removeAttributeQuotes: true, 
                removeCommentsFromCDATA: true, 
                removeEmptyAttributes: true, 
                removeOptionalTags: true, 
                removeRedundantAttributes: true, 
                useShortDoctype: true 
            }, 
            files: [{ 
                expand: true, 
                cwd: '<%= yeoman.dist %>', 
                src: '{,*/}*.html', 
                dest: '<%= yeoman.dist %>' 
            }] 
        } 
    }, 
 
    // By default, your `index.html`'s <!-- Usemin block --> will take care of 
    // minification. These next options are pre-configured if you do not wish 
    // to use the Usemin blocks. 
     cssmin: { 
         dist: { 
             files: { 
                 '<%= yeoman.dist %>/styles/main.css': [ 
                     '.tmp/styles/{,*/}*.css', 
                     '<%= yeoman.app %>/styles/{,*/}*.css' 
                 ] 
             } 
         } 
     }, 
    // uglify: { 
    //     dist: { 
    //         files: { 
    //             '<%= yeoman.dist %>/scripts/scripts.js': [ 
    //                 '<%= yeoman.dist %>/scripts/scripts.js' 
    //             ] 
    //         } 
    //     } 
    // }, 
    // concat: { 
    //     dist: {} 
    // }, 
 
    // Copies remaining files to places other tasks can use 
    copy: { 
        dist: { 
            files: [{ 
                expand: true, 
                dot: true, 
                cwd: '<%= yeoman.app %>', 
                dest: '<%= yeoman.dist %>', 
                src: [ 
                    '*.{ico,png,txt}', 
                    '.htaccess', 
                    'images/{,*/}*.webp', 
                    '{,*/}*.html', 
                    'styles/fonts/{,*/}*.*', 
                    'bower_components/' + (this.includeCompass ? 'sass-' : '') + 'bootstrap/' + (this.includeCompass ? 'fonts/' : 'dist/fonts/') +'*.*' 
                ] 
            }] 
        }, 
        styles: { 
            expand: true, 
            dot: true, 
            cwd: '<%= yeoman.app %>/styles', 
            dest: '.tmp/styles/', 
            src: '{,*/}*.css' 
        } 
    }, 
 
 
    // Generates a custom Modernizr build that includes only the tests you 
    // reference in your app 
    modernizr: { 
        devFile: '<%= yeoman.app %>/bower_components/modernizr/modernizr.js', 
        outputFile: '<%= yeoman.dist %>/bower_components/modernizr/modernizr.js', 
        files: [ 
            '<%= yeoman.dist %>/scripts/{,*/}*.js', 
            '<%= yeoman.dist %>/styles/{,*/}*.css', 
            '!<%= yeoman.dist %>/scripts/vendor/*' 
        ], 
        uglify: true 
    }, 
 
    // Run some tasks in parallel to speed up build process 
    concurrent: { 
        server: [ 
            'compass:server', 
            'copy:styles' 
        ], 
        test: [ 
            'copy:styles' 
        ], 
        dist: [ 
            'compass', 
            'copy:styles', 
            'imagemin', 
            'svgmin' 
        ] 
    } 
}); 
 
 
grunt.registerTask('serve', function (target) { 
    if (target === 'dist') { 
        return grunt.task.run(['build', 'connect:dist:keepalive']); 
    } 
 
    grunt.task.run([ 
        'clean:server', 
        'concurrent:server', 
        'autoprefixer', 
        'connect:livereload', 
        'watch' 
    ]); 
}); 
 
grunt.registerTask('server', function () { 
    grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.'); 
    grunt.task.run(['serve']); 
}); 
 
grunt.registerTask('test', function(target) { 
    if (target !== 'watch') { 
        grunt.task.run([ 
            'clean:server', 
            'concurrent:test', 
            'autoprefixer', 
        ]); 
    } 
 
    grunt.task.run([ 
        'connect:test', 
        'mocha' 
    ]); 
}); 
 
grunt.registerTask('build', [ 
    'clean:dist', 
    'compass:dist', 
    'useminPrepare', 
    'concurrent:dist', 
    'autoprefixer', 
    'concat', 
    'cssmin', 
    'uglify', 
    'copy:dist', 
    'modernizr', 
    //'rev', 
    'usemin' 
    //'htmlmin' 
]); 
 
grunt.registerTask('default', [ 
    'newer:jshint', 
    'test', 
    'build' 
]); 
}; 

请您参考如下方法:

您在 dist 文件夹中看到的 main.css 实际上是一个文件串联。 如果你想让你的 test.scss 在那里，看看你的 index.html 文件。

您将看到以下内容:

```

<!-- build:css({.tmp,app}) styles/main.css --> 
<link rel="stylesheet" href="styles/main.css"> 
 
<link rel="stylesheet" href="styles/test.css"> 
 
<!-- endbuild --> 

```

当您构建时，yeoman 将查找所有这些文件并从中创建一个 main.css。