Scss with format fragment and prefix function
See original GitHub issueHi, I use your plugin in almost every project and like it very much, thanks for that. Now I wanted to test in scss/css fragments, but unfortunately the prefix function is not executed there.
Expected behavior
$svg-sprites: (
'sprite-client-general-check': '/build/base/spritemap.svg#sprite-client-general-check'
)
Actual behavior
$svg-sprites: (
'sprite-client-general-check': "/build/base/spritemap.svg#(sprite) => {
let segments = sprite.split(path.sep);
const index = segments.indexOf('assets')
if (index) {
// removes all segments before theme name and the last
segments = segments.slice(index - 1, segments.length - 1);
// removes segments for asset and icons
segments.splice(1, 2);
}
return `sprite-${segments.join('-')}-`
}sprite-client-general-check",
System information svg-spritemap-webpack-plugin: ^3.8.3 => 3.8.3
Minimal reproduction
path: 'htdocs/web/themes/**/assets/icons/**/*.svg',
config: {
output: {
filename: 'spritemap.svg',
svgo: svgoConfig,
chunk: {
name: 'spritemap',
keep: false
},
},
sprite: {
prefix: (sprite) => {
let segments = sprite.split(path.sep);
const index = segments.indexOf('assets')
if (index) {
// removes all segments before theme name and the last
segments = segments.slice(index - 1, segments.length - 1);
// removes segments for asset and icons
segments.splice(1, 2);
}
return `sprite-${segments.join('-')}-`
},
idify: (filename) => filename.replace(/[\s]+/g, '-'),
gutter: 0,
generate: {
title: true,
symbol: true,
use: true,
view: true
}
},
styles: {
filename: 'svg-sprites.scss',
format: 'fragment',
keepAttributes: true,
variables: {
sprites: 'svg-sprites',
sizes: 'svg-sizes',
variables: 'svg-variables',
mixin: 'sprite'
}
}
}
Issue Analytics
- State:
- Created 3 years ago
- Comments:8 (5 by maintainers)
Top Results From Across the Web
Sass: @import
Sass extends CSS's @import rule with the ability to import Sass and CSS stylesheets, providing access to mixins, functions, and variables and combining ......
Read more >document - CSS: Cascading Style Sheets - MDN Web Docs
The @document CSS at-rule restricts the style rules contained within it ... url-prefix() , domain() , and media-document() functions can be ...
Read more >Working with Fragments in Thymeleaf - Baeldung
Learn how to create reusable view components with Thymeleaf fragments to simplify template management.
Read more >SASS Mixin Syntax for '$' Prefix [duplicate] - Stack Overflow
So all I need to know really is how I would format this line in Sass so that it spits out the passed...
Read more >Language injections | IntelliJ IDEA Documentation - JetBrains
When you inject a language (such as HTML, CSS, XML, RegExp, ... A language fragment may be combined with a prefix and a...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Hi @cascornelissen , thanks for your quick reply. The fragment looks correct but the key has changed and is without prefix. I think it was with a prefix before that. Even if you configured data as the format.
This change was included in
3.9.0
🚀