question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using sass with svgs as data uris, build reports Css Minimizer Plugin errors

See original GitHub issue

Description

Using sass with svgs as data uris, e.g. with Bootstrap, running build reports errors in the Css Minimizer Plugin config, related to postcss-svgo.

e.g.

Css Minimizer Plugin: postcss-svgo: [SCSS FILE PATH, LIINE NO]: Error: Plugin name should be specified
warn undefined

Steps to reproduce

Install a basic gatsby starter with scss enabled, including gatsby-plugin-sass. Add bootstrap and import bootstrap.scss in gatsby-browser.js. Run npm build

Expected result

No errors. Sass built with svgs.

Actual result

Errors.

Environment

  System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.17.0 - /usr/local/bin/node
    npm: 6.14.13 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Safari: 14.1
  npmPackages:
    gatsby: ^3.6.1 => 3.6.1 
    gatsby-plugin-react-helmet: ^4.6.0 => 4.6.0 
    gatsby-plugin-resolve-src: ^2.1.0 => 2.1.0 
    gatsby-plugin-sass: ^4.6.0 => 4.6.0 
    gatsby-plugin-sitemap: ^4.2.0 => 4.2.0 

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
spikyjtcommented, May 27, 2021

It looks like an array of strings is fine, or an array of individual plugin objects, as I’ve used, but not one big object with plugin names as properties and boolean values to indicate enabled/disabled.

0reactions
piehcommented, May 27, 2021

Btw interestingly - https://cssnano.co/docs/presets/#options-syntax still shows same structure as we have now ( tho, not clear if it would allow multiple plugins in single object as we have now). It also might be just outdated heh

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular 6 to 12 Migration: Getting Multiple Warning: Css ...
I'm trying to minify Sass css files in your project but the syntax is unknown! Perhaps I don't know anything about the syntax...
Read more >
Using SVG | CSS-Tricks
SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator.
Read more >
What Does Create-React-App Actually Do? | by Andrew Mc
A series of checks are run on the versions of node , yarn , and npm to select the correct version of react-scripts...
Read more >
Download Hundreds of Plugins - Sketch
Create charts with random, tabular or JSON data inside Sketch. ... SVGO Compressor. by Sketch ... Use this plugin to batch export layers...
Read more >
20 Tips for Optimizing CSS Performance - SitePoint
That said, there are still optimizations you can make, and ways to change how we use CSS that will boost site performance.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found