CODEWITHSUNDEEP
rubysassyeomancompass
realph
realph

Reputation: 4671

Using Compass with Yeoman App

I'm using generator-zf5 to generate my Yeoman app. When installing I said Yes to including Compass in my project, but I can't see the Compass files in my project files. Am I doing something wrong. Do I need to include this myself. If so, how?

I uninstalled all Sass gems and Compass and reinstalled with gem install compass --version 0.12.7 and am now using Compass 0.12.7 and Sass 3.2.19 (Media Mark).

I then installed Compass locally using:

npm install grunt-contrib-compass --save-dev

But when I add @include border-radius(25px); to my CSS, I keep getting an error. Can anyone help me? I'm still trying to rap my head around a lot of these terminal processes.

Thanks in advance!

Upvotes: 1

Views: 883

Answers (2)

juliancwirko
juliancwirko

Reputation: 1282

it is resolved now in the generator-zf5 github issue tracker: https://github.com/juliancwirko/generator-zf5/issues/26

Upvotes: 1

Gopherkhan
Gopherkhan

Reputation: 4342

Have you added the require option in your gruntfile?

See: http://ericdfields.com/post/installing-compass-frameworks-in-a-yeoman-project

Make sure you have the proper 'watch' block in your initConfig:

grunt.initConfig({

    // Project settings
    yeoman: appConfig,

    // Watches files for changes and runs tasks based on the changed files
    watch: {
      ...
      compass: {
        files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
        tasks: ['compass:server', 'autoprefixer']
      }, ...

And also the compass definition below the watch:

// 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: './bower_components',
        httpImagesPath: '/images',
        httpGeneratedImagesPath: '/images/generated',
        httpFontsPath: '/styles/fonts',
        relativeAssets: false,
        assetCacheBuster: false,
        raw: 'Sass::Script::Number.precision = 10\n'
      },
      dist: {
        options: {
          generatedImagesDir: '<%= yeoman.dist %>/images/generated'
        }
      },
      server: {
        options: {
          debugInfo: true
        }
      }
    },

And lastly, the concurrent tasks definition:

// Run some tasks in parallel to speed up the build process
    concurrent: {
      server: [
        'compass:server'
      ],
      test: [
        'compass'
      ],
      dist: [
        'compass:dist',
        'imagemin',
        'svgmin'
      ]
    },

Upvotes: 0

Related Questions