yeoman建立指南针bootstrap scss图像路径总是前缀'../' [英] yeoman build the compass bootstrap scss images path always prefix '../'

问题描述

问题出在 bootstrap sass 上，图标精灵路径是所有方式在图像前添加'../'，

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

我希望这样'../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 
}，
  

如何配置grunt文件以删除前缀。

解决方案

这是Compass任务的默认配置： https://github.com/yeoman/generator-webapp/blob/master/app/templates/Gruntfile.js#L157

 指南针：{
选项：{
 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 / genera ted'
} 
}，
服务器：{
选项：{
 debugInfo：true 
} 
} 
} 
  

也许尝试与此同步，看看它是否自行排列。

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.

解决方案

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.

这篇关于yeoman建立指南针bootstrap scss图像路径总是前缀'../'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！