plugins added through webpack.config.js should have higher priority than the Flow-default

[vlukashov]

I want to use a different webpack loader for .css files (NOTE: Flow generates a webpack.generated.js that uses raw-loader for that).

This is what I have in webpack.config.js

module.exports = merge(flowDefaults, {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "lit-css-loader"
      }
    ]
  }
});

I want that to be sufficient to override the Flow defaults. With Flow 3.0.0.alpha7 it is not.

Investigation:

So the problem is that the merge appends new values to the other, try this:

module.exports = merge(flowDefaults, {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['lit-css-loader']
      }
    ]
  },
});
console.log(module.exports.module.rules);

then run webpack and you get

[ { test: /\.js$/, use: [ [BabelMultiTargetLoader] ] },
  { test: /\.ts$/,
    use: [ [BabelMultiTargetLoader], 'awesome-typescript-loader' ] },
  { test: /\.css$/i, use: [ 'raw-loader' ] },
  { test: /\.css$/i, use: [ 'lit-css-loader' ] } ]

[haijian-vaadin]

Ref: https://github.com/vaadin-learning-center/crm-tutorial-typescript/blob/with-styling/webpack.config.js#L7-L13

[platosha]

Also consider priorities for vite.config.ts.