Custom postcss webpack style rules missing with pwa.config.js about pwa HOT 8 CLOSED

Ah, I see. Thanks!

In a future release, I'll make this such that you can add an exports.sass key to your config file.

You're right – that's too much for such a simple thing, and not having it exposed is contradictory to the rest of the system/ethos.

I should be able to release a patch-fix for this this weekend.

from pwa.

Ok, as of v0.5.4 we're now using the updated version of sass-loader 😅

This means you can disregard my comment about about includePaths not working inside sassOptions... this is the correct variant now:

// you can also use function config if you want
exports.sass = {
  sassOptions: {
    includePaths: ['path/to/theme']
  }
}

from pwa.

Sorry, I'm not 100% sure what you're asking quite yet.

Are you trying to modify the PostCSS config? If so, you can do that through a postcss key within your pwa.config.js file. Here's an example:

// pwa.config.js
exports.postcss = function (config) {
  config.plugins.push(require('postcss-flexbugs-fixes'));
};

from pwa.

Hi @lukeed, I'm actually trying to update sass-loader include path and that is what I've managed to do right now. Here is the pwa.config.js prototype I've been testing with :

exports.webpack = function(config, env) {
  let { production, webpack } = env;
  let index = 0;
  for (let rule of config.module.rules) {
    let use = rule.use;
    if (use && use.length > 0 && use[use.length-1].loader === 'sass-loader') {
      let opts = config.module.rules[index].use[use.length-1].options;
      if (opts && opts.sassOptions && opts.sassOptions.includePaths) {
        opts.sassOptions.includePaths.push('theme');
      } else if (opts && opts.sassOptions) {
        opts.sassOptions.includPaths = ['theme'];
      } else if (opts) {
        opts.sassOptions = {
          includePaths: ['theme'],
        };
      } else {
        config.module.rules[index].use[use.length-1].options = {
          sassOptions: {
            includePaths: ['theme'],
          },
        };
      }
      console.log('sass-loader sassOptions configuration updated!');
      console.log(JSON.stringify(config.module.rules[index],null,2));
      break
    }
    index++
  }
}

This is quite a lot of code for such a simple configuration update and I can't see how PostCSS could be used to do so.

I hope that this example added some clarity to what I'm trying to propose.

from pwa.

@lukeed Looking forward for the patch. I can help too 😉 I just need some insights though. For instance the files I should be looking etc...

from pwa.

Thanks for your patience on this.

This is now achievable in the next release (happening in a few minutes):

// pwa.config.js

exports.sass = {
  // your options here
  // passed directly to sass-loader
}

That config object will be used for .scss and .sass extensions – PWA will enforce indentedSyntax: true for the .sass extension though, since that's required.

Please note that includePaths seems to be broken/doesn't work as advertised.
I spent some time debugging this to make sure your use-case was supported. Turns out that includePaths can't live inside the sassOptions object. You have to do this instead:

exports.sass {
  includePaths: ['path/to/theme']
}

// OR, if you want to use function-type:

const { join } = require('path');

exports.sass = function (config, env) {
  config.includePaths = [
    join(env.src, 'theme')
  ];
}

Hope that cleans up your config file now :)

from pwa.

Amazing! Thank you @lukeed

from pwa.

No problem, thanks for the heads up :)

from pwa.