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