npmpackage.info

Gathering detailed insights and metrics for webpack-stylesheet-variable-replacer-plugin

webpack-stylesheet-variable-replacer-plugin - 1.6.0 | npmpackage.info

webpack-stylesheet-variable-replacer-plugin

webpack plugin for change theme . 利用webpack实现网页换肤。

1.6.0

MIT

JavaScript

744.11 kB

Installations

npm install webpack-stylesheet-variable-replacer-plugin

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

10.22.0

NPM Version

6.14.6 Pull Requests

Open

19

Total

23

Closed

3

Merged

1

Issues

Open

1

Total

2

Closed

1

Releases

Unable to fetch releases

Languages

JavaScript

JavaScript (100%)

Developer

eaTong

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

18 Stars

29 Commits

2 Forks

1 Watchers

21 Branches

1 Contributors

Updated on Oct 26, 2023

Maintainers

View All 1 Contributors

Package Meta Information

Latest Version

1.6.0

Package Id

webpack-stylesheet-variable-replacer-plugin@1.6.0

Unpacked Size

744.11 kB

Size

195.32 kB

File Count

NPM Version

6.14.6

Node Version

10.22.0

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

No dependencies detected.

webpack-stylesheet-variable-replacer-plugin

easy to change css variable with only one function:window.replaceVariable, config example: react-starter

how to (3 steps)

Step1: import plugin in your webpack.config.js(don't forget to install plugin).

1const WebpackVariableReplacer = require('webpack-stylesheet-variable-replacer-plugin');

step:2: config your plugin:

1module.exports = {
2  plugins:[
3    // ... your plugin
4    new WebpackVariableReplacer({
5      htmlFileName: 'index.html', // if your application has a html file , It's used for inject javascript file.
6      publicPath: webContextRoot, // as you need to inject javascript file , this is path prefix for visite the file for replace variable.
7      matchVariables: { // It's a key-value Object , key is only alias for your variable , such as I use 'main' for main color I use in application.
8        // notice that value is the original value in your style, not target you want to replace.
9        main: '#33ab9a',
10        mainHover: '#54b8a7',
11      }
12    }),
13  ]
14}

step3: call function in anywhere in your code.

1window.replaceStyleVariable && window.replaceStyleVariable({main: 'blue',mainHover:'red'});

This step can be called any where (plugin has been injected to the html file ). The arguments need only one which is the stylesheet variable you want to replace to . Such as you want to change main to blue color , your argument will be : '{main:"blue"}',the key for this argument should math your config (step2).

zh-cn (中文说明)

简单三步实现网页换肤功能

第一步 引入包

const VariableReplacerPlugin =require('webpack-variable-replacer-plugin');

第二步 定义webpack plugin

new VariableReplacerPlugin({matchVariables: {main: '#456789'}})

第三步 任何地方调用方法实现换肤

window.replaceStyleVariable({main:'#987654'})

No vulnerabilities found.

No security vulnerabilities found.