Using a custom webpack loader in Nuxt

Question

I am using Nuxt.js, and I want to tell Webpack to use a specific loader (raw-loader) for a specific file extension (.pug). According to the documentation, I should add custom webpack rules using build.extend, i.e. something like this:

build: {
  // Extend webpack config
  extend(config) {
    config.module.rules.push({
      test: /\.pug$/,
      use: "raw-loader",
    })
  },
}

However, this will not work if the file format is already matched by a built-in rule (as is the case with .pug). My rule will be overridden by the built-in rule.

What is the recommended way to replace a specific webpack rule? I currently resorted to awkwardly loop through all existing rules to overwrite those interfering with my rule, like this:

build: {
  // Extend webpack config
  extend(config) {
      config.module.rules = config.module.rules
        .map(x => {
          if (x.test.source.includes(".pug")) {
            return {
              test: /\.pug$/,
              use: "raw-loader",
            }
          } else {
            return x
          }
        })
  },
}