DEV Community

Getting started with Sapper, Svelte, Postcss & Tailwind

Alan on June 11, 2020

Coming from the Vue ecosystem, where vue cli makes it a breeze to get up and running, it was a bit of a struggle coming to Sapper/Svelte and trying...
Read full post
Collapse
 
filippemafra profile image
Filippe Mafra • • Edited

Hi everyone,
If anyone have the problem:

TypeError: Invalid PostCSS Plugin found at: plugins[1]

, just replace in "package.json" ->

"postcss-nested": "^5.0.0",

to

"postcss-nested": "^4.2.3",

It happens because different parts of your system support different postcss. The PostCSS project is in the middle of migration process from PostCSS 7 to PostCSS 8

Collapse
 
epavanello profile image
Emanuele Pavanello •

thanks!

Collapse
 
wwwchique profile image
www-chique •

You saved my day.

Collapse
 
shankscoder profile image
Ashwin Shankar •

If anyone faces an issue with PostCSS 8 compatibility, what you need to do is add postcss as a dependency to the project. (not as a dev-dependency)

Run either:
npm i postcss
or
yarn add postcss
or do what I did and manually edit the package.json file and add this line directly to the dependencies section:

"dependencies": {
    ...
    "postcss": "^8.1.3"
},
Enter fullscreen mode Exit fullscreen mode
Collapse
 
esgabo profile image
Gabriel Espinel •

Hi, Alan. Thanks for the post.

I'm experiencing issues when trying to build for prod. The index.css doesn't seem to be purged (still over 1MB). And when I try to export, it doesn't find the index.css.

Do you face this issue as well?

Collapse
 
esgabo profile image
Gabriel Espinel • • Edited

Found the issue. It turns out "NODE_ENV=production" won't work on Windows. I solved it by installing "cross-env" and updating the script to "cross-env NODE_ENV=production ...".

Many thanks for this post.

A couple of suggestions.
1) Locating global.css on the static directory will also copy that file on build/export. I've moved it to src folder instead to solve this issue.
2) Maybe it's out of the scope of this post, but I think it's missing a way to minify the generated CSS.
3) Also update the script for "export" to build the css

Collapse
 
hqm42 profile image
Robert Steuck • • Edited

Just add

    require('cssnano')({
      preset: ['default', {
        discardComments: {
          removeAll: true,
        },
      }],
    }),

to the plugins array in postcss.config.js to minify the index.css

Collapse
 
omaratta212 profile image
Omar Atta •

Thank you very much for sharing the solution!

Collapse
 
haudraufhaun profile image
HAUDRAUFHAUN •

Good afternoon,
If I want to start the server of the application I get following error:

Unrecognized option 'preprocess'

Does anyone now how I'm able to resolve this issue because it seems to crash my server.

Collapse
 
haudraufhaun profile image
HAUDRAUFHAUN •

It was my fault because I took preprocess into the rollup svelte compileroptions.

Collapse
 
marviorocha profile image
Marvio Rocha •

I follow this tutorial with tailwindcss 2.0, and it worked perfectly Thank you