Roots Discourse

[Sage 10] url in CSS

sage webpack
#1

How can I use a resource inside a SCSS file, e.g. a background image?

.wp-block-group {
  &.is-style-special {
    background-image: url('images/test.svg');
  }
}

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.

#2

https://laravel.com/docs/7.x/mix#url-processing

2 Likes
#3

So the URL rewrite option is disabled in Sage 10:


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.

#4

Any ideas? :confused: 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.

#5

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);
#6

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.

#7

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.

As far as svgo and anything else you might want, take a look at https://laravel-mix.com/extensions

For handling your Gutenberg palette registration, you can take a look at https://github.com/roots/palette-webpack-plugin which I wrote supporting SASS as well as Tailwind out of the box.

#8

Shouldn’t svg optimization (svgo) be included by default in Sage 10?

#9

It’s opinionated and comes down to workflow. https://laravel-mix.com/extensions/imagemin would be what you’re looking for, though.

#10

Isn’t the whole sage theme opinionated? :).
Well, how to add to the imagemin mix correctly?
I tried this modification:

mix.copyWatched('resources/assets/images/**', 'dist/images')
   .copyWatched('resources/assets/fonts/**', 'dist/fonts')
   .imagemin(
        'img/**.*',
        {
            context: 'resources',
        },
        {
            optipng: {
                optimizationLevel: 5,
            },
            jpegtran: null,
            plugins: [
                require('imagemin-mozjpeg')({
                    quality: 100,
                    progressive: true,
                }),
                require('imagemin-svgo'),
            ],
        }
    );

However, this results in a build error:

Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.

This is probably not the same as gulp pipes.

#11

Any ideas? I just can’t get the imagemin mix working correctly in Sage 10. :frowning:

#12

Based on this it looks like you’re telling imagemin to look in img/ when your images are in resources/assets/images/.

#14

Like this?

mix/*.copyWatched('resources/assets/images/**', 'dist/images')*/
   .copyWatched('resources/assets/fonts/**', 'dist/fonts')
   .imagemin('resources/assets/images/**', 'dist/images',
        {
            optipng: {
                optimizationLevel: 5,
            },
            jpegtran: null,
            plugins: [
                require('imagemin-mozjpeg')({
                    quality: 100,
                    progressive: true,
                }),
                require('imagemin-svgo'),
            ],
        },
    );

Sadly I still get the same error message. It appears that laravel mix internally calls the webpack copy plugin incorrectly.

#15

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?

#16

Is anyone using imagemin in Sage 10? There are zero examples for using the imagemin mix in Sage 10.

#17

@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.

#18

Thanks, so apparently plugins/mixes for Laravel mix are already outdating :frowning:
Well, I will use the normal webpack config from your example then.