How do I use postcss-scss

[Numline1]

Hi guys, I'm new to Brunch and I've been fiddling with all the stuff for the past few hours. I gotta say I love it, but I can't figure one thing out:

I'm using TailwindCSS as the frontend framework, and I've been trying to use SCSS as well. Iwas able to make SCSS work, using "sass-brunch", however whenever I use the @tailwind function in the SCSS file, Brunch just compiles it as is (the resulting app.css just has @tailwind('whatever') in it).

This works perfectly if I just use a .CSS file (which doesn't use the sass-brunch processor).

This is my Brunch config:

exports.files = {
    javascripts: {
        joinTo: {
            'vendor.js': /^(?!app)/,
            'app.js': /^app/
        }
    },
    stylesheets: {
        joinTo: {
            'app.css': /^app/
        }
    }
};

exports.plugins = {
    babel: {
        presets: [
            'latest'
        ]
    },
    postcss: {
        processors: [
            require('tailwindcss')('./app/js/tailwind.js')
        ]
    }
};

What I've tried was adding this to the postcss section:

options: {
      parser: require('postcss-scss'),
    },

however with no luck. Any tips?

PS: I know this is rather a support request than an issue with the plugin, but I'd really appreciate any help :] I wasn't able to find any IRC or Slack to ask this, so I'll just ask here. Thanks for any help :]

[kgcreative]

Try moving postcss-brunch after sass-brunch in your package.json. Alternatively, there is a sport as-brunch plug-in that tracks post as-brunch that should also work. To;dr, brunch runs packages in package.json order, which means it tries to run postcss before sass.

[kgcreative]

Argh! spostcss-brunch plug-in (on mobile client so can’t edit, I’ll fix from a real computer)

[Numline1]

Thanks for the tips, sadly, neither of them worked. I had to switch to Laravel Mix (Webpack wrapper) to start bootstrapping the project, but I hope I'll be eventually able to switch back if I have some spare time to test it again.

[jakehopking]

@Numline1 Did you ever get this working in Brunch? I'm at the same point of frustration. Thanks.

[kgcreative]

@jakehopking Is there a repo you could share that has this problem? (even if it's a base install + scss + postcss) - I could at the very least clone it, get it working, and open up a PR with the fix

[Numline1]

@jakehopking sadly, no, I ended up using Laravel Mix (basically a Webpack wrapper). :(

[gilmrjc]

I found the problem. The plugin ignores sass files:

https://github.com/brunch/postcss-brunch/blob/f91639453275f743382bdfb0b9b6df34ee5890e5/index.js#L37

To make it work only add the following:

  plugins: {
    postcss: {
      pattern: /\.s?css$/i,
      processors: [
        require('autoprefixer'),
      ]
    }
  }