%20(2).svg)
项目简介
本项目是一个Webpack插件，用于为已有SASS变量的前端项目扩展多主题功能。该插件会把SASS变量转换为CSS变量并挂载到HTML节点下，通过配置多个JSON主题文件，能在不改动原有代码的情况下实现主题的灵活切换。
项目的主要特性和功能
- 能从SASS样式表中精准提取变量。
- 将提取的SASS变量转换为CSS变量并挂载到HTML节点。
- 支持配置多个JSON主题文件，可快速切换多种主题样式。
- 只需修改HTML的
data-theme属性即可完成主题切换。 - 支持Webpack配置和运行时使用，可与现有项目无缝集成，不破坏原有代码结构。
- 生成的文件能在多种前端框架（如Vue）中稳定运行。
- 解决全局变量管理和多主题样式切换问题，减少重复开发工作量，提高开发效率。
- 满足不同客户的个性化需求，增强用户体验。
安装使用步骤
假设用户已经下载了本项目的源码文件：
1. 安装插件：在项目根目录下，通过npm将该插件安装到dev依赖中：
bash
npm install extract-sass-vars-plugin --save-dev
2. 配置Webpack：在webpack.config.js中添加插件配置。先引入插件模块，然后在module的规则里加入相应的loader规则，同时在plugins中添加插件配置，指定默认使用的JSON文件和路径。可参考以下示例进行配置：
js
const ExtractSassVarsPlugin = require('extract-sass-vars-plugin');
const path = require('path');
// 主题json文件，可配置多个，内容为sass变量
const themes = [
{ name: 'light', path: path.resolve(__dirname, './src/themes/light.json') },
{ name: 'dark', path: path.resolve(__dirname, './src/themes/dark.json') }
]
module.exports = {
//...
module: {
rules: [
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader',
// sass-loader处理前先用该插件自带的loader将sass变量替换成css变量
{
loader: ExtractSassVarsPlugin.loader,
options: {
themes
}
}
]
}
]
},
plugins: [
new ExtractSassVarsPlugin({
themes,
defaultTheme: 'light', // 默认主题, 可选，如果没有设置默认主题，则取themes[0].name作为默认主题
outputDir: 'assets/css', // css文件输出路径 可选
filename: 'themes' // 生成的css文件名 可选，默认themes
})
]
}
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】