PostCSS Slow in Sage10

sage
1

This is my first foray into Sage 10 but is postCSS always this slow in Mix? Does it need configuring?

I’m trying to get a Tailwind CSS workflow going and every change is taking 5-10 seconds to reload the new CSS.

2

What’s your current mix config? I know Sage 9’s webpack config was abnormally snappy, but unfortunately it was not sustainable long-term. 5-10 does sound unusually long, though.

Can you try without scripts? The default scripts in Sage 10 is broken at the moment (namely the dynamic imports).

3

My PostCSS config:

module.exports = ({ file, options }) => {
  return {
    plugins: {
      tailwindcss: `./tailwind.js`,
    },
  };
};

Laravel Mix

mix.postCss(src`styles/app.css`, 'styles').webpackConfig({
  module: {
      rules: [
          {
              test: /\.css/,
              use: [{loader: "postcss-loader", options: {}}],
          },
      ],
  },
});

And yeah I had to remove the .extract() from JS to get mix working at all.

4 
mix.postCss('resources/assets/styles/app.css', 'styles', [
  require('postcss-easy-import')(),
  require('precss')(),
  require('tailwindcss')('./tailwind.config.js'),
])

im using precss and postcss-easy-import but theres an example. you dont need a postcss config or webpack config rules.

otherwise, just empty out everything but your bootstrap and jquery imports in app.js and add back .extract() and get rolling.

1 Like
5

Awesome. That’s loading a lot quicker.

6

This topic was automatically closed after 42 days. New replies are no longer allowed.