Webpack for customized white label sass/css styling

Question

Webpack for customized white label sass/css styling

My goal is to produce multiple CSS files using webpack for a customizable application.

I aim to execute the webpack CSS/SASS loaders once for each unique 'brand' and have it saved into individual files. This approach is necessary because I maintain a distinct variable file for each brand and need the SASS to compile a separate CSS file for each one.

While I am aware that grunt/gulp could achieve this, I prefer not to include them in this specific project.

css sass webpack white-labelling

Answer 1

Answer №1

Lately, I have been dedicating time to solving this particular issue. After exploring the i18n example config on GitHub, I discovered a method that showcases how it is achievable. Essentially, the webpack configuration can be structured as an array, allowing for operations like the following:

import webpack from 'webpack';

export default [
  {
    entry: {
      'brand-1': ['path/to/vars-1.scss', 'path/to/my.scss'],
    }
    // ...
  },
  {
    entry: {
      'brand-2': ['path/to/vars-2.scss', 'path/to/my.scss'],
    }
    // ...
  },
];

In practice, you may choose to generate this list programmatically, but I opted to write it out explicitly for better comprehension. Due to our dynamic SCSS variables, I conceived a script responsible for crafting the webpack configuration and subsequently injecting the variables utilizing the sassLoader.data feature.

To streamline the process, incorporating webpack-merge is advisable to compartmentalize the configurations effectively.

const common = {
  module: {
    loaders: {
      // ...
    },
  },
};

export default BRANDS.map((brand) => (
  merge(
    common,
    {
      entry: {
        [brand.name]: [brand.variableFile, 'path/to/my.scss'],
      },
      // Additional customization if needed.
      plugins: [
        webpack.DefinePlugin({
          BRAND_NAME: brand.name,
        }),
      ],
    },
  )
));

Personally, I employ the ExtractTextPlugin approach by instantiating one for each individual brand. While uncertain of its correctness, I continue to explore how it intertwines with the CommonChunksPlugin for potential solutions.

As the journey progresses, I remain optimistic in unlocking further insights and resolving any outstanding concerns along the way.

Answer 2

Lately, I have been dedicating time to solving this particular issue. After exploring the i18n example config on GitHub, I discovered a method that showcases how it is achievable. Essentially, the webpack configuration can be structured as an array, allowing for operations like the following:

import webpack from 'webpack';

export default [
  {
    entry: {
      'brand-1': ['path/to/vars-1.scss', 'path/to/my.scss'],
    }
    // ...
  },
  {
    entry: {
      'brand-2': ['path/to/vars-2.scss', 'path/to/my.scss'],
    }
    // ...
  },
];

In practice, you may choose to generate this list programmatically, but I opted to write it out explicitly for better comprehension. Due to our dynamic SCSS variables, I conceived a script responsible for crafting the webpack configuration and subsequently injecting the variables utilizing the sassLoader.data feature.

To streamline the process, incorporating webpack-merge is advisable to compartmentalize the configurations effectively.

const common = {
  module: {
    loaders: {
      // ...
    },
  },
};

export default BRANDS.map((brand) => (
  merge(
    common,
    {
      entry: {
        [brand.name]: [brand.variableFile, 'path/to/my.scss'],
      },
      // Additional customization if needed.
      plugins: [
        webpack.DefinePlugin({
          BRAND_NAME: brand.name,
        }),
      ],
    },
  )
));

Personally, I employ the ExtractTextPlugin approach by instantiating one for each individual brand. While uncertain of its correctness, I continue to explore how it intertwines with the CommonChunksPlugin for potential solutions.

As the journey progresses, I remain optimistic in unlocking further insights and resolving any outstanding concerns along the way.

Webpack for customized white label sass/css styling

Answer №1

Similar questions

The secrets of z-index: Ensuring nested elements stay behind their parent element

Distinct headings break up two-columned lists

Is there a way to organize an array of elements into three columns using PHP?

Styling drop-down menus for navigation items in CSS

:selected element malfunctioning

After the animation finishes, the CSS3 :hover effect ceases to function

A blank screen of errors pops up when attempting to update through a form

All pictures aligned with overflow

Creating a Dropdown Filter using Vanilla JavaScript

Add a <span> element to the header element in the CSS using jQuery

What could be causing my Squarespace animation to function properly in Chrome but not in Safari?

Enigmatic void appears above row upon removal of content from a single item

Unleash the potential of a never-ending expansion for grid cells on Canvas

Fix the positioning of a div in BootStrap and CSS code

Simple user interface height to occupy the entire browser window

Centering Images Using CSS Floats

The collapsing z-index menu in Bootstrap 4 is experiencing CSS issues and is not functioning correctly

Customizing Material UI: Adjusting the visibility of slider thumb upon user interaction and value changes in the slider

Achieving a smooth sliding motion with the help of jQuery animation

Switch out either even or odd divs within a container