Sage 9 PostCSS plugins

sage
1

Hi There,

is there anyone who has Sage 9 already working with LostGrid? I’m wondering how to configure things. I just added lost with yarn. add the plugin to my postcss.config.js

plugins: {
      lost: true,
      cssnano: options.enabled.optimize ? cssnanoConfig : false,
      autoprefixer: true,
    },

but how do you configure the webpack.config.js??

thanks

2

That’s how you’d add it in Sage. There’s no need to touch the webpack config since postcss-loader is using postcss.config.js. Now, if you want to change some options for LostGrid, you would pass an options object instead of true. You would do it like this:

// postcss.config.js

const lostGridConfig = {
  // Options here
};

//...
plugins: {
      lost: lostGridConfig,
      cssnano: options.enabled.optimize ? cssnanoConfig : false,
      autoprefixer: true,
    },
3 Likes
3

thanks for your reply, I just configured it this way but unfortunately it still does not work.

I installed lost as an devdependency, adjust the postcss.config.js the way you showed me above , did a yarn build. but still get an error from my linter which says it does not recognize the lost properties.

4

You’ll need to add the properties LostGrid adds to the Stylelint config in package.json. This may be outdated — or just so good that it hasn’t needed an update in two years — but try this:

1 Like
5

This works!! awesome , thanks for your help!!

1 Like
6

Just a heads up: using @lost will give you trouble. All you need to avoid that trouble is add lost to the ignoreAtRules array in the stylelint config. After I shared this config, I thought it might be cool to make a Tailwind CSS stylelint config just to save time, but it seems that since Sage sets ignoreAtRules itself, it will completely override the config(s) it extends.

1 Like
7

Check , added , @lost does work properly now, merci beaucoup!

1 Like