Yarn build production failing "asset optimizationError: write EPIPE"

sage
1

I am trying to use a UI kit and have included their CSS file by including the file in config.js and also enqueuing in setup.php.
I have disabled stylelint by commenting out the following lines from webpack.config.js

const StyleLintPlugin = require('stylelint-webpack-plugin');
......
// new StyleLintPlugin({
    //   failOnError: !config.enabled.watcher,
    //   syntax: 'scss',
    // }),

Because i read in some other post thats how you disable the stylelinting.

The yarn run build works fine. But when i run

yarn run build:production

its failing with the following error:

94% asset optimizationError: write EPIPE                                            
    at exports._errnoException (util.js:1020:11)
    at WriteWrap.afterWrite (net.js:812:14)
error An unexpected error occurred: "Command failed.
Exit code: 1
Command: sh
Arguments: -c webpack --progress -p --config resources/assets/build/webpack.config.js
Directory: ............
Output:
".

I am stuck on this error for like 2 days and cant move ahead with my project, how can i just disable stylelinting, jshinting, or all other types of JS and CSS cleaning/linting all those checks in the new sage.

2

This is coming from the image optimization plugin

Try commenting out https://github.com/roots/sage/blob/9d5de7db39e72a31ce635e8feb352c982915486b/resources/assets/build/webpack.config.optimize.js#L10-L19

3

Possible solutions https://github.com/imagemin/imagemin-mozjpeg/issues/26#issuecomment-367667086

1 Like
4

thanks a lot!! the fix for me was from your possible solutions :
sudo apt-get install libpng16-dev

I was able to successfully compile the theme with yarn run build:production but theres another issue now, the styles that i defined in _globals.css are not getting compiled. There are no errors or warnings.

The styles work perfectly fine when i do yarn run build. What could be wrong now ?

5

never mind i got the issue fixed, somebody had the same issue :

It was a bootstrap 4 issue.
adding these lines to my _variables.scss fixed:

$navbar-dark-toggler-icon-bg: none;
$navbar-light-toggler-icon-bg: none;

i really appreciate the help from this forum of this great theme!..i have been following you guys since last 3-4 years when it was very new. All of us have come a long way guys! kudos :slight_smile: … keep up the great work!

1 Like
6

One way to reinstate the toggler is to put the code inline in the head template:

  <style type="text/css">
 .navbar-light .navbar-toggler-icon {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 254, 255, .9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  }
  </style>

I have been struggling with finding a way to include an svg background in the css that gets compiled via yarn build:production.

With the above code (as a scss asset), the build runs without complaining, but the assets aren’t compiled.

This “workaround”:

url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{str-replace(str-replace(#{$navbar-dark-color}, "(", "%28"), ")", "%29")}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");

Gives compile error (thankfully): Expected whitespace after ")".

I look forward to becoming more useful in identifying and helping solve these problems.

Wondering if the webpack and/or postcss-loader configuration are places to look for solution.

7

Closing this thread since the OP was about the image optimization not working, which was solved — don’t want to clutter this up with the unrelated SVG issue

1 Like