Redirect an import

TL;DR

Say I import a file, /modules/a.js. Is it possible to configure webpack to intercept the loading of this file, and point it to, for example, /modules/a-dev.js?

Detail

The actual use case is for ES CSS Modules. The setup is that you have a CSS file, styles.css, and it’ll make a metadata-like file, styles.css.js. The idea is that when you write import { style } from '../styles.css it’ll actually give you the JS file instead.

However, for some module bundlers, this is problematic, as it will try to load the CSS file instead of the JS file.

Instead, you could keep your existing CSS file with the existing name, write import { style } from '../styles.m.css', and you’d get a metadata file called styles.m.css.js, which the bundler would then find.

For development reasons, you would want to use the regular CSS Modules loader, and not ES CSS Modules. Is there a way to get it to redirect these import '../styles.m.css' to the actual CSS files?

Author: Fantashit

2 thoughts on “Redirect an import

  1.   plugins: [
        {
          apply(compiler) {
            compiler.resolvers.normal.apply({
              apply(resolver) {
                resolver.plugin('resolve', (context, request) => {
                  request.path = request.path.replace(/\.m\.css($|\?)/, '.css'); // eslint-disable-line
                });
              },
            });
          },
        },
      ],

Comments are closed.