The line background-image: url('images/test.svg'); is simply added to the output CSS file,
no paths are resolved, no warnings/errors during build either.
Does this mean I have to specify the URL relative from the stylesheet?
What about cache hashes, aren’t they used like in Sage 9?
@Log1x: Currently such a relative URL in the SCSS file results in an URL like this: https://example.com/wp/images/test.svg. No theme directory path is added to the URL.
Any ideas? Currently I can either hardcode the full absolute path with URL rewriting disabled, or use relative path, that is also found by Mix, but rewritten to be an absolute path relative to /wp instead the theme directory, so the file isn’t found by browser.
Have you made some other modifications to your mix configuration? I have a recent project that uses SCSS and the Sage 10 mix config, and relative URLs work fine: With processCssUrls disabled, they just get passed through:
background-image: url('../images/notification/alert.svg');
/** renders as */
background-image:url(../images/notification/alert/svg);
I also noticed that apparently the SVGs are not minified (using svgo).
Btw. I expected initial issues, but this is surely frustrating.
The other issue is that this sage setup apparently doesn’t inject editor styles but rather scopes the styles on its own.
Then there is the issue of sharing the color swatches between Gutenberg PHP theme palette registration and generated sASS styles. Currently I have to duplicate and keep track of all these colors.
There’s not really an effective way to “inject” styles into Gutenberg. You more or less have to scope it in its current state or face selector specificity hell in the backend.
Has anyone managed to get the Laravel imagemin mix running in Sage 10?
The need for image minification surely has arisen and someone had to set it up, right?
@strarsis Hey,
I was trying to do the same thing and optimize SVGs with svgo in Sage 10. laravel-mix-imagemin plugin is not updated and was not working for me well.
This is what I’ve used:
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
mix.webpackConfig({
plugins: [
new CopyWebpackPlugin({
patterns: [
{
from: 'resources/assets/images',
to: 'images/',
},
],
}),
new ImageminPlugin({
svgo: {
plugins: [
{
// See more options on https://github.com/svg/svgo#what-it-can-do
cleanupAttrs: false,
},
],
},
test: /\.(jpe?g|png|gif|svg)$/i,
}),
],
});
I also commented out copyWatched for images. Maybe there is some way to watch copying optimized files as well, but I didn’t need that at the moment. Anyway, you can run this optimization only in production with mix.inProduction() condition and on development, just do copyWatched.