Install

npm install css-color-extract-plugin
Copy the code
yarn add css-color-extract-plugin
Copy the code
  • This plug-in is mainly used to extract theme colors
  • The extracted CSS data will be mounted to the window
  • Insert into by color substitution<style>To dynamically modify the theme

  • Results the preview

  • Full project source code

webpack.config.js

const CssColorExtractPlugin = require('css-color-extract-plugin').default;
const PRIMARY_COLOR = '#1890ff';
module.exports = {
    ...
    module: {
        rules: [{test: /\.css$/,
            exclude: '/\.module\.css$/'.use: [
                "style-loader"."css-loader", 
                {
                  loader: CssColorExtractPlugin.loader,
                  options: {
                    colors: [ PRIMARY_COLOR ]
                  }
              },
           ]
        },
        {
            test:  /\.module\.css$/,
            use: [
                "style-loader", 
                 {
                   loader: "css-loader".options: {
                     modules: true.localIdentName: '[path][name]__[local]',}}, {loader: CssColorExtractPlugin.loader,
                    options: {
                    colors: [ PRIMARY_COLOR ],
                    modules: true.localIdentName: '[path][name]__[local]',}},]}]}...plugins: [...new CssColorExtractPlugin({ fileName: 'theme'})]};Copy the code

After compilation, theme.js is inserted into the HTML, with content similar to the following

window.CSS_EXTRACT_COLOR_PLUGIN = [
  {"source":".src-App-module__example {  background: #1890ff;}"."fileName":"App.module.scss"."matchColors": ["#1890ff"] {},"source":".src-controller-blog-components-Header-Header-module__theme {  color: #067785;}.src-controller-blog-components-Header-Header-module__pc_header {  background: #1890ff;}.src-controller-blog-components-Header-Header-module__mb_header {  background: #1890ff;}.src-controller-blog-components-Header-Header-module__mb_header .src-controller-blog-components-Header-Header-module__mb_nav {  background: #1890ff;}"."fileName":"Header.module.scss"."matchColors": ["#1890ff"]}];Copy the code

You can then replace the theme color with a simple re

import React, { Component } from 'react';
import styles from './App.module.scss';
import { SketchPicker } from 'react-color';
function replaceColor(source, color, replaceColor) {
    return source.replace(new RegExp(` (:. *? \\s*)(${color})(\\b.*?) (? ` =}).'mig'), (group) = > {
        return group.replace(new RegExp(`${color}`.'mig'), replaceColor);
    });
}
const PRIMARY_COLOR = '#1890ff';
class App extends Component {
    
    async setColor(color) {
        const styleData = window.CSS_EXTRACT_COLOR_PLUGIN || [];
        const cssText = styleData.map((item) = > item.source).join(' ');
        const styleText = replaceColor(cssText, PRIMARY_COLOR, color);
        const style = document.createElement('style');
        style.innerHTML = styleText;
        document.body.appendChild(style);
    }
    render() {
        return (
            <div className={styles['example']} >
                <SketchPicker onChangeComplete={(colorResult)= > this.setColor(colorResult.hex)} />
            </div>); }}export default App;
Copy the code

loader Options

 {
    colors: string[]; If the color level error occurs, you need to select the color to be overridden. You can use this option to extract different colors in different filesonly? : boolean =true; // Extract only the selected color rules, otherwise the entire file will be extractedmodules? : boolean =false; localIdentName? : string =' ';
 }
Copy the code

plugin Options

{ fileName? : string;// Extract the filename of the color, otherwise embed it directly in the script tagvariableName? : string ='CSS_EXTRACT_COLOR_PLUGIN'; // The name of the variable to mount to window, default
 CSS_EXTRACT_COLOR_PLUGIN
 }
Copy the code