CODEWITHSUNDEEP
gruntjsyeoman
lolocoo
lolocoo

Reputation: 35

yeoman build the compass bootstrap scss images path always prefix '../'

the problem is in bootstrap sass, icon sprites path is all ways prefix '../' before the image,

'../../images/../images/glyphicons-halflings-white.png'

I hope like this '../images/../images/glyphicons-halflings-white.png'

grunt files config :

  options: {
    sassDir: '<%= yeoman.app %>/styles',
    cssDir: '.tmp/styles',
    imagesDir: 'images',
    javascriptsDir: '<%= yeoman.app %>/scripts',
    fontsDir: '<%= yeoman.app %>/styles/fonts',
    importPath: '<%= yeoman.app %>/components',
    relativeAssets: true
  },

How to config the grunt files to remove the prefix.

Upvotes: 2

Views: 1230

Answers (2)

escapedcat
escapedcat

Reputation: 766

Yeoman, Grunt and Compass sprites worked for me:

    // The next line tells compass where to put the sprites
    // and the HTTP path to them.
    raw: 'http_images_path = "/images/"\ngenerated_images_dir = ".tmp/images"\nhttp_generated_images_path = "/images/"',
    // This doesn't work with relative paths.
    relativeAssets: false

Upvotes: 0

Stephen
Stephen

Reputation: 5770

Here is the default configuration of the Compass task: https://github.com/yeoman/generator-webapp/blob/master/app/templates/Gruntfile.js#L157

    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
        },
        dist: {
            options: {
                generatedImagesDir: '<%= yeoman.dist %>/images/generated'
            }
        },
        server: {
            options: {
                debugInfo: true
            }
        }
    }

Maybe try syncing up with this and see if it sorts itself out.

Upvotes: 2

Related Questions