在 nuxt.config.js 中添加自定义 webpack 规则

Question

I am trying to configure nuxt so that webpack loads all *.quirk files using specific loaders but it's like if it ignores the new created rule about *.quirk files.

To simplify the problem I tread .quirk files as CSS files. So I have a definition of CSS inside this file.

Also because of that simplification I use style-loader and css-loader.

The quirk file I am trying to load is in ~/assets folder. To make sure webpack includes files from this folder I added it via include: property of a rule.

Please find source codes below.

// nuxt.config.js
import path from 'path';

export default {
  mode: 'universal',
  // ...
  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      config.module.rules.push({
        test: /\.quirk$/,
        include: [path.resolve(__dirname, "./assets")],
        use: [
          'style-loader',
          'css-loader'
        ]
      })
    }
  }
}

/* test.quirk */
/* I am trying to import this file as a CSS file */
.testouille.other.mine.bonjour.baguette {
    color: red !important;
}

<!-- index.vue -->
<!-- This is the default view generated by nuxt -->
<!-- I just added 'testouille' class below to -->
<!-- see a direct result of loaded test.quirk file -->
<template>
  <div class="container">
    <div>
      <logo />
      <h1 class="title">
        webpackquirk
      </h1>
      <h2 class="subtitle testouille">
        My striking Nuxt.js project
      </h2>
      <div class="links">
        <a
          href="https://nuxtjs.org/"
          target="_blank"
          class="button--green"
        >
          Documentation
        </a>
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          class="button--grey"
        >
          GitHub
        </a>
      </div>
    </div>
  </div>
</template>

<!-- ... rest of the file ...-->

When executing npm run dev I expect the text My striking Nuxt.js project to turn red since my test.quirk should be loaded as a CSS file but it doesn't work.

If I add the definition of the CSS class .testouille in the style of the .vue file it works.

I also tried to create a custom loader in which I call a console.log('...') which would appear in the console and would show that a .quirk file has been found and loaded, but I don't see any message in the console, which means it didn't find any .quirk file.

So it's like it ignores my rule.

What am I missing?

Answer 1

For whoever finds this question now:

seems with:

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    extend(config) {
      config.module.rules.push({
        test: /\.weird$/,
        loader: "raw-loader"
      });
    }
  }

in nuxt.config.js & the loader installed you can do:

import info from "./raw.weird";

and it works as expected. But there are some weird things happening in the config, but I couldn't pinpoint why exactly. After going in circles, it just start working. Repository for the reference: https://github.com/marcin-wosinek/webpack-nuxt