webpack插件 - 自动抽取css中的主题颜色,并实现一键换肤

最新推荐文章于 2023-09-25 17:28:20 发布

学前端的第五个月

最新推荐文章于 2023-09-25 17:28:20 发布

阅读量328

点赞数 5

分类专栏：前端 CSS 文章标签：前端 webpack css javascript plugin

本文链接：https://blog.csdn.net/m0_57454385/article/details/118090519

版权

本文介绍了一个webpack插件，用于自动抽取CSS中的主题颜色，并将其挂载到window对象下，实现了动态修改主题色的功能。通过在编译后的html中插入theme.js，然后使用正则表达式替换，可以轻松实现一键换肤。

摘要由CSDN通过智能技术生成

Install

npm install css-color-extract-plugin

yarn add css-color-extract-plugin

该插件主要用于提取主题颜色
提取到的css数据会挂载到window下
通过颜色替换再插入到<style>，可达到动态修改主题的目的

在这里插入图片描述

结果预览
完全项目源码

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$/