Using sass with svgs as data uris, build reports Css Minimizer Plugin errors
See original GitHub issueDescription
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:
- Created 2 years ago
- Comments:5 (5 by maintainers)
Top 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 >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
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.
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