Using with PostCSS

[mttmccb]

I've configured an additional loader but it's not working as expected... I've started with skeleton-typescript-webpack

and update the css config as per below

      require('@easy-webpack/config-css')
        ({ filename: 'styles.css', allChunks: true, sourceMap: false, additionalLoaders: ['postcss'] }),
      {
        postcss: [
            smartImport,
            cssnext({
              features: {
                customProperties: {
                  preserve: false
                }
              }
            }),
            cssnano({
              reduceIdents: false
            }),
            reporter,
          ]
      },

But it doesn't seem to be processing any of the files I've required into my components. It's just picking up the 'styles.css' and doing the necessary processing for that.

Any ideas on where to start, I'm not sure if it's a loader issue or some other config with easy-webpack.

EDIT

Seems that switching from require to import has resolved the issue, it's now being processed by webpack correctly. Why wouldn't require do this?

[niieani]

Can you be more specific as to: "Seems that switching from require to import"? Where did you make the switch?

[mttmccb]

sorry I wasn't clear. In my View I was including the CSS like this

<template>
  <require from='./my-component.css'></require>
  ...

So I removed it and in the ViewModel I included it like this instead

import './my-component.css';

export class MyComponent {
   ...

Webpack wasn't processing the file otherwise.

[mttmccb]

Just trying this with the updated skeleton and can't figure out how to pass the settings, I can set the additionalLoaders ok...

  css({ filename: 'styles.css', allChunks: true, sourceMap: false, additionalLoaders: ['postcss']}),