Autoprefixer disabled in SASS preset in Assets

[tomaszbujnowicz]

It seems that autoprefixer is disabled when switching to SASS preset:

module.exports = {
  assets: {
    presets: [
      'sass'
    ]
  }
}

Is there any way that we can enable it through slater.config.js?
Or any other way.

I couldn't find that option anywhere.
Hope you can help guys ;)

[estrattonbailey]

@tomaszbujnowicz ah interesting, thanks for the issue! Yeah we should be able to fix that. The idea is for these presets to be plug-n-play, so def want to add all the bells and whistles that most people need (like autoprefixer).

The SASS preset is here. I imagine we just need to add a bit of config in there.

[tomaszbujnowicz]

I think it would be definitely cool to be able to configure webpack inside Slater to use any other CSS framework e.g. https://tailwindcss.com/
But for now, please when you find the quick fix on how to enable autoprefixer when using Slater, let me know ;)
By the way, it's a good feeling to work with your starter boilerplate, good place to kick off with the project.

[tomaszbujnowicz]

Ok, I think the best way would be to include postcss.config.js in the theme folder or include these postcss settings directly in slater.config.js

Quick and dirty workaround for now:

1. Clone the repo

2. cd compiler

3. npm install autoprefixer

4. Go to /compiler/presents/sass.js and add the following line just after require.resolve('css-loader'),

{
  loader: require.resolve('postcss-loader'),
  options: {
    plugins: [
      require('autoprefixer')({
        browsers: ['last 2 versions']
      }),
    ],
  }
},

The whole block should look like:

config.module.rules.push({
  test: /\.(sa|sc)ss$/,
  exclude: /node_modules/,
  use: [
    ExtractCSS.loader,
    require.resolve('css-loader'),
    {
      loader: require.resolve('postcss-loader'),
      options: {
        plugins: [
          require('autoprefixer')({
            browsers: ['last 2 versions']
          }),
        ],
      }
    },
    {
      loader: require.resolve('sass-loader'),
      options: {
        implementation: require('sass'),
      }
    }
  ]
})

Please note that ideally we should use postcss.config.js in order to handle supported browsers.
I assume that would complex task for @estrattonbailey ;)

[Jore]

@estrattonbailey has there been any thought on allowing extension of the default webpack config?

[estrattonbailey]

@all-contributors please add @tomaszbujnowicz for code

[allcontributors]

@estrattonbailey

I've put up a pull request to add @tomaszbujnowicz! 🎉