Comments (8)
I updated readme with some instructions on that topic. Is that ok or you want an actual option in config?
from webpack-spritesmith.
Thanks for the fast reply.
i have an handlebar template i constructed my self (few edits to the on in npm lib) i just want to point to it so the loader will use it instead of the one in the npm lib.
i could not understand from the readme how to do it.
in grunt plugin i just use the cssTemplate option to reference for the template location.
it will be great if you can add this option in the config, but any other solution that can load custom template from a provided path will help me a lot.
thanks.
from webpack-spritesmith.
Yeah my English sucks. And I am not even sure how to explain it in my own language:)
Anyway. Updated readme more.
To be clear. Currently there are no "official" way to do what you want. But since I used spritesheet-templates, and spritesheet-templates allows you to create custom templates, you can leverage that and register your own template, and then tell webpack-spritesmith to use that template.
You can do that with
//webpack.config.js
var templater = require('spritesheet-templates');
templater.addTemplate('template_name', templateFunction)
//or
var fs = require('fs');
var handlebarsCode = fs.readFileSync('/path/to/template.handlebars');
templater.addHandlebarsTemplate('template_name', handlebarsCode);
...
new SpritesmithPlugin({
target: {
css: [
['/path/to/generated-source-file', {format: 'template_name'}]
]
}
})
I'll add explicit option to config soon.
from webpack-spritesmith.
thanks a lot. :)
it worked, but only when i loaded the master branch (it could not find the template in latest release version).
also had to add encoding for it to read my handlbars.
handlebarsCode = fs.readFileSync('/path/mytemplate', 'utf8');
from webpack-spritesmith.
@mixtur, your advice is simply wrong, I'm afraid. The version of spritesheet-templates
being loaded will not be the same instance as the one used by webpack-spritesmith
. If you install spritesheet-templates
as a dependency, that will be a separate instance of that library. To use the correct instance of spritesheet-templates
, you must load it like this:
var templater = require('webpack-spritesmith/node_modules/spritesheet-templates');
It is ugly and hacky, but it will work.
from webpack-spritesmith.
Not always. With npm 3+ you have more flat directory structure. And It is kinda works. Sometimes. Need more investigation to be sure.
Anyway It should be implemented inside webpack-spritesmith, and what I currently adviced is a dirty temporary workaround. I think I'll deal with it in upcoming weekend.
from webpack-spritesmith.
You're right, I actually was having an issue with the install order. Sorry about that, I'm still getting used to Node 4.
from webpack-spritesmith.
in 0.2.5 you can define custom template.
So what I did via hack above, now can be achieved this way:
...
new SpritesmithPlugin({
...
target: {
css: [
['/path/to/generated-source-file', {format: 'template_name'}]
]
},
customTemplates: {
template_name: templateFunction,
//or
template_name: '/path/to/template.handlebars'
}
})
The hack should still work though.
Closing it now.
from webpack-spritesmith.
Related Issues (20)
- How to passed prefix to customTemplates HOT 1
- Moderate Vulnerability in used static-eval version HOT 1
- Support for image min HOT 3
- add `sss` extension HOT 2
- Console output messages with created assets HOT 2
- Multiple folders import with glob HOT 12
- Sprites with the same name as other sprites are inaccessible and should not be included in generated spritesheet HOT 1
- How to support '@3' retina? HOT 3
- How to optimise the sprite image? HOT 2
- Fails when Source Folder has Subfolders with Images HOT 4
- How to generate an animated sprite (GIF) out of animated GIFs? HOT 3
- The path to the sprite breaks down HOT 4
- Multiple customTemplates functions HOT 6
- Error: EPERM HOT 1
- Security issues HOT 1
- how to use retina
- Multiple plugin for generating multiple sprites from different source images causes problems HOT 3
- how to set max size, sometimes the generated sprite.png is too big HOT 2
- gaze awlays works in polling mode in mac os mojave HOT 7
- How to generate sprite image/s by folder structure? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from webpack-spritesmith.