webpack
.css
, less
, postcss
, sass
.v1.0.7
themes-switch
replaces extract-text-webpack-plugin
with mini-css-extract-plugin
, and upgrade peerDependency to Webpack 4.3.x. Now the option themesLoader
is deprecated.
If you are using Webpack 3.x and extract-text-webpack-plugin
, view the docs here.npm install themes-switch --save-dev
themes-switch
in webpack.config.js
, and put MiniCssExtractPlugin.loader
in your less/sass/postcss/css loaders.const ThemesGeneratorPlugin = require('themes-switch/ThemesGeneratorPlugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: {
main: './src/main.js'
},
output: {
filename: '[name]-[contenthash].js',
chunkFilename: '[name]-[contenthash].js',
path: `${__dirname}/build`,
publicPath: ''
},
module: {
rules: [
// ...
{
test: /\.(less|css)$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
}
]
},
plugins: [
new ThemesGeneratorPlugin({
srcDir: 'src',
themesDir: 'src/assets/themes',
outputDir: 'static/css',
defaultStyleName: 'default.less'
})
]
};
themesDir
:src
- themes
- dark.less
- default.less
- light.less
default.less
:@import 'light.less';
@color-main: #222A42;
@color-text: #FFF;
default.less
when using theme variables:@import 'default.less';
.main {
background: @color-main;
}
ThemesGeneratorPlugin
scans files in themesDir
and files that import default.less
, then generates separated files for all themes automatically.
You can access the themes info via process.themes
in your code, value such as { 'theme-dark': 'css/dark.css', 'theme-light': 'css/light.css' }
, or call getThemes
method directly.
import { getThemes } from 'themes-switch';
// ...
const themes = getThemes();
// ...
switchTheme
method to switch to new theme by pass theme name.Switch themes in your code
import { switchTheme } from 'themes-switch';
// ...
switchTheme({ theme: 'themes-dark' });
// ...
Name | Description | Type | Default Value |
---|---|---|---|
srcDir | Souce code directory | {String} |
|
themesDir | Directory of themes | {String} |
|
outputDir | Directory of generated files | {String} |
|
defaultStyleName | File name of default style, specify it when you use different style formats | {String} |
default |
clearTemp | Delete temp directory when webpack was done | {Boolean} |
true |
disable | Disable the plugin | {Boolean} |
false |
useStaticThemeName | Whether to add random number to file names of themes | {Boolean} |
false |
ignoredFilesInThemesDir | Files that will be ignored in themes directory | {String} |
|
usePureCSS | If you only use pure CSS, you need to explicitly declare | {Boolean} |
false |
enableHotReload | Whether to generate new files for webpack hot reload | {Boolean} |
false |
switchTheme({ theme: 'themes-dark', onLoad: onLoadFunc });
Options
theme-dark
.changeTheme('themes-dark', 'css/dark.css', onLoadFunc);
Options
theme-dark
.css/dark.css
. You can get the value from process.themes
const themes = getThemes();
// { 'theme-dark': 'css/dark.css', 'theme-light': 'css/light.css' }
It will delete temp directory. You can call the method as needed, e.g. when you stop webpack-dev-server in development mode.