Enable webpack to dynamically load an extra or different css file based on certain conditions

Question

Enable webpack to dynamically load an extra or different css file based on certain conditions

In my current project using Angular 4 and webpack 3 for bundling, I am working on implementing a CSS theming feature. This project is designed to be used by multiple companies, each with their own brand guidelines that need to be reflected in the design. To achieve this, we require the ability to switch between different themes easily.

Instead of creating separate versions of code for each theme, we aim to keep all themes within the same codebase. The differences between themes will mainly involve changes to colors, icons, fonts, and other styling elements that can be adjusted through CSS.

I have considered various methods to implement theming, such as using :host-context for components and changing the body class based on environment variables in webpack. However, including every theme inside the bundle may not be the most efficient approach. I am exploring alternative options.

One idea I have been considering is having webpack dynamically load CSS files based on a certain pattern rather than loading specific files. For instance, when a component like button.component.ts imports button.component.css, webpack could check for a file named button.component.theme-name.css in the directory. If this file exists, it would be imported instead or alongside the default CSS file.

This concept extends beyond CSS files and could also apply to HTML templates in angular components. I am curious if there are plugins or advanced loader configurations that could facilitate this dynamic loading process.

If you have any insights or suggestions on how to approach this task differently, please share your thoughts in the comments!

css angular webpack

Answer 1

Answer №1

My latest project involved developing a custom loader capable of appending or replacing the content of a loaded file with the content of another file bearing a specific theme title.

In summary...

Create a file using the loader.

Integrate it into your webpack configuration.

Execute webpack in an environment specified by THEME=<themeName>.

theme-loader.js

const fs = require('fs');
const loaderUtils = require('loader-utils');

module.exports = function (mainData) {
  const options = loaderUtils.getOptions(this);
  let themeName = options.theme;
  let mode = options.mode;

  if (themeName) {
    // default mode
    if (!Object.keys(transform).includes(mode)) {
      mode = 'replace';
    }

    // Update the asset path to include the theme name
    const themeAssetPath = this.resourcePath.replace(/\.([^\.]*)$/, `.${themeName}.$1`);
    const callback = this.async();

    // For Hot Module Replacement to function properly
    this.addDependency(themeAssetPath);

    fs.readFile(themeAssetPath, 'utf8', (err, themeData) => {
      if (!err) {
        callback(null, transform[mode](mainData, themeData));
      } else if (err.code === 'ENOENT') {
        // No worries! If the file isn't found, no action is needed
        callback(null, mainData);
      } else {
        callback(err);
      }
    });
  } else {
    return mainData;
  }
};

const transform = {
  // Concatenate theme file with main file 
  concat: (mainData, themeData) => mainData + '\n' + themeData,
  // Replace main file with theme file
  replace: (mainData, themeData) => themeData
};

An excerpt from the webpack.config.js utilizing this custom loader:

resolveLoader: {
  modules: [
    paths.libs, // ./node_modules
    paths.config // custom loader directory
  ]
},

module: {
  rules: [
    // Component styles
    {
      test: /\.css$/,
      include: path.join(paths.src, 'app'),
      use: [
        'raw-loader',
        // Search for themed styles and include them in the main file if found
        {
          loader: 'theme-loader',
          options: {
            theme: process.env.THEME,
            mode: 'concat'
          }
        }
      ]
    },

    // Angular templates — Use themed version if available
    {
      test: /\.html$/,
      use: ['raw-loader',
        {
          loader: 'theme-loader',
          options: {
            theme: process.env.THEME,
            mode: 'replace'
          }
        }
      ]
    }
  ]
}

For instance, consider an app.component.css:

:host {
  background: #f0f0f0;
  color: #333333;

  padding: 1rem 2rem;

  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
}

nav {
  /* ... */
  /* Styles for nav element */
  /* ... */
}

header {
  /* ... */
  /* Header styles */
  /* ... */
}

To implement a dark theme without altering existing styles extensively, we create app.component.dark.css:

:host {
  background: #222222;
  color: #e0e0e0;
}

We can run webpack with the environment variable THEME set to dark. The loader processes app.component.css, loads app.component.dark.css, and appends the themed styles at the end of the resulting file.

If multiple selectors have equal importance and specificity, later rules take precedence over earlier ones (MDN).

While CSS allows cascading changes based on selector priority, HTML requires manual template adjustments for theme variations. This may involve rewriting templates to align with desired branding requirements.

This endeavor represents my initial foray into creating a webpack loader. Feel free to share feedback if you encounter any issues.

Answer 2

My latest project involved developing a custom loader capable of appending or replacing the content of a loaded file with the content of another file bearing a specific theme title.

In summary...

Create a file using the loader.

Integrate it into your webpack configuration.

Execute webpack in an environment specified by THEME=<themeName>.

theme-loader.js

const fs = require('fs');
const loaderUtils = require('loader-utils');

module.exports = function (mainData) {
  const options = loaderUtils.getOptions(this);
  let themeName = options.theme;
  let mode = options.mode;

  if (themeName) {
    // default mode
    if (!Object.keys(transform).includes(mode)) {
      mode = 'replace';
    }

    // Update the asset path to include the theme name
    const themeAssetPath = this.resourcePath.replace(/\.([^\.]*)$/, `.${themeName}.$1`);
    const callback = this.async();

    // For Hot Module Replacement to function properly
    this.addDependency(themeAssetPath);

    fs.readFile(themeAssetPath, 'utf8', (err, themeData) => {
      if (!err) {
        callback(null, transform[mode](mainData, themeData));
      } else if (err.code === 'ENOENT') {
        // No worries! If the file isn't found, no action is needed
        callback(null, mainData);
      } else {
        callback(err);
      }
    });
  } else {
    return mainData;
  }
};

const transform = {
  // Concatenate theme file with main file 
  concat: (mainData, themeData) => mainData + '\n' + themeData,
  // Replace main file with theme file
  replace: (mainData, themeData) => themeData
};

An excerpt from the webpack.config.js utilizing this custom loader:

resolveLoader: {
  modules: [
    paths.libs, // ./node_modules
    paths.config // custom loader directory
  ]
},

module: {
  rules: [
    // Component styles
    {
      test: /\.css$/,
      include: path.join(paths.src, 'app'),
      use: [
        'raw-loader',
        // Search for themed styles and include them in the main file if found
        {
          loader: 'theme-loader',
          options: {
            theme: process.env.THEME,
            mode: 'concat'
          }
        }
      ]
    },

    // Angular templates — Use themed version if available
    {
      test: /\.html$/,
      use: ['raw-loader',
        {
          loader: 'theme-loader',
          options: {
            theme: process.env.THEME,
            mode: 'replace'
          }
        }
      ]
    }
  ]
}

For instance, consider an app.component.css:

:host {
  background: #f0f0f0;
  color: #333333;

  padding: 1rem 2rem;

  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
}

nav {
  /* ... */
  /* Styles for nav element */
  /* ... */
}

header {
  /* ... */
  /* Header styles */
  /* ... */
}

To implement a dark theme without altering existing styles extensively, we create app.component.dark.css:

:host {
  background: #222222;
  color: #e0e0e0;
}

We can run webpack with the environment variable THEME set to dark. The loader processes app.component.css, loads app.component.dark.css, and appends the themed styles at the end of the resulting file.

If multiple selectors have equal importance and specificity, later rules take precedence over earlier ones (MDN).

While CSS allows cascading changes based on selector priority, HTML requires manual template adjustments for theme variations. This may involve rewriting templates to align with desired branding requirements.

This endeavor represents my initial foray into creating a webpack loader. Feel free to share feedback if you encounter any issues.

Enable webpack to dynamically load an extra or different css file based on certain conditions

Answer №1

Similar questions

Tips for removing a specific shape from an HTML element

Is it possible to effectively interpret raw data from an ionic Bluetooth module?

Encountered a Webpack issue when trying to load the primeng.min

Using a BehaviorSubject in conjunction with ngIf can rearrange the placement of elements

Having difficulties generating ngc and tsc AOT ES5 compatible code

The mask feature is not functioning properly in Internet Explorer

What implications does dependency injection have for performance in Angular?

Tips for applying CSS styles exclusively to the homepage

What is the best way to ensure the table header is aligned and maintained at the top of the table?

Arrangement of 3 columns on the left and 1 column on the right using flex-box layout

Shifting static information both above and below a 100vh element

Ways to display JSON data in Angular 2

PhantomJS does not recognize external CSS on the page

What is the trick to have a CSS element overflow the boundaries of its containing div entirely?

Steps for incorporating moment.js into an Angular 2 project

Activating a tab in Angular from a parent component

Encountering the 'CORS policy has blocked' error message when attempting to upload a file

I am having trouble retrieving edge labels asynchronously in jsplumb. When I subscribe to the observable to retrieve the labels of the edges, I am receiving undefined. Is there a solution to this issue

Retrieve the value of a PHP array within a for loop and transfer it to JQuery

Is Angular sending strings through data binding?