Referenced File Names Do Not Match Generated File Names

[HughxDev]

iconizr: {
  svg2sprites: {
    src: ['<%= conf.bg.images %>/svg'],
    dest: '<%= conf.bg.styles %>/_iconizr',
    options: {
      prefix: 'bg',
      verbose: 3,
      render: {
        css: false,
        scss: '.',
      } // render
    } // options
  } // svg2sprites
} // iconizr

Result:

<script type="text/javascript">!function(){var e=window,t=e.document,a=arguments,n="createElementNS",s="http://www.w3.org/",A="svg",r=function(e){var r=t.getElementsByTagName("script")[0],g=t.createElement("link");g.rel="stylesheet",g.type="text/css",g.href=a[4]+a[1*e|2*(t[n]&&t[n](s+"2000/"+A,A).createSVGRect&&t.implementation.hasFeature(s+"TR/SVG11/feature#Image","1.1"))],r.parentNode.insertBefore(g,r)},g=new e.Image;g.onerror=function(){r(0)},g.onload=function(){r(1===g.width&&1===g.height)},g.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="}("bg-png-sprite.css","bg-png-data.css","bg-svg-sprite.css","bg-svg-data.css","/eomdb/SysConfig/WebPortal/BostonGlobe/Framework/styles/_iconizr/");</script><noscript><link href="/eomdb/SysConfig/WebPortal/BostonGlobe/Framework/styles/_iconizr/bg-png-sprite.css" rel="stylesheet" type="text/css" media="all"></noscript>

Note the file names in the tester are bg-png-sprite.css, etc. based on the specified prefix. But the actual source files are called _iconizr-png-sprite.scss, etc. which seem to get their prefix from the parent directory. Also, with the leading underscore, they wouldn't get turned into individual files.

Additionally, all of the scss files get placed one level behind the one specified in dest. So _iconizr-png-sprite.scss gets put under styles, with the background values set to url(icons/icons.png);. But the icons folder is within _iconizr, not styles.

[jkphl]

Hey @hguiney,

you are using the configuration options the wrong way.

First of all, just to make this clear, the dest option is used to specify the output directory, not a prefix for your output files.

Second, by using just . as the dest value for your Sass output (which is what you do implicitly by using the shorthand scss: '.'), you're effectively giving your main output directory as destination directory for your Sass files (again, as a directory, not as a file prefix). Please read the documentation about the rendering configuration, especially the sections about missing file extensions and file names ...

What you will want to use should be more like this (untested; although I'd not recommend putting the Sass files into the same directory as the final CSS files ...):

iconizr: {
  svg2sprites: {
    src: ['<%= conf.bg.images %>/svg'],
    dest: '<%= conf.bg.styles %>/',
    options: {
      prefix: 'bg',
      verbose: 3,
      render: {
        css: false,
        scss: '_iconizr',
      } // render
    } // options
  } // svg2sprites
} // iconizr

Does this work for you?

Cheers, Joschi

[HughxDev]

I understand they are meant to specify directories. But, when I assign a full path to scss, it would create a bunch of subdirectories under the dest folder. So I thought that the scss was to specify a SASS-specific subdirectory.

But it looks like the scss directive IS creating prefixes. When I run the code you posted, I get _iconizr-png-sprite.scss. The loader fragment does not reflect this though, it points to bg-png-sprite.css.

However, when I run this code:

iconizr: {
  svg2sprites: {
    src: ['<%= conf.bg.images %>/svg'],
    dest: '<%= conf.bg.styles %>/',
    options: {
      prefix: 'bg',
      verbose: 3,
      render: {
        css: false,
        scss: 'bg',
      } // render
    } // options
  } // svg2sprites
} // iconizr

… it generates bg-png-sprite.scss, which would work with the loader fragment when compiled. But that's not the prefix I want.

[jkphl]

The scss option is meant to specify Sass-specific subdirectories and a file prefix (depending on what you use as it's value).

Apart from that, It's totally out of iconizr's scope to take care of the file name translation between your Sass files and the final CSS files. The CSS files are expected to have certain names (even if you skip their creation by css: false), but your Sass files may be named arbitrarily. This holds especially true in cases when you use an underscore as a prefix for the Sass files — as you pointed out yourself, these files are intended to be imported into other Sass files, so how should iconizr know about the importing Sass files' names? It's up to you to ensure that the Sass files are compiled into the expectedly named CSS files. In the simplest case, all of these files have the same prefices, only then you don't really have to care about ...

[jkphl]

Hi @hguiney,

as you didn't respond to this any further, I assume you solved your name translation troubles and close this issue for now. Please feel free to re-open in case you still have problems.

Cheers, Joschi