next-theme-loader Webpack SCSS变量注入加载器
Webpack 的 SCSS 变量注入麻烦？next-theme-loader能帮你省不少事。你只要配置好加载器，主题包里的 SCSS 变量就能自动注入进每个 SCSS 文件，挺省心。
安装上也不复杂，三个依赖：babel-plugin-import、@alifd/next-theme-loader、@alifd/next-theme-webpack-plugin，一个个npm install走起就行。
配置的时候，结合webpack和ExtractTextPlugin一起用更顺手。就像这样：
const ThemePlugin = require('@alifd/next-theme-webpack-plugin');
...
plugins: [
new ThemePlugin({ theme: '@alifd/theme-one' })
]适合在做多主题切换或者基于 UI 框架（比如 Fusion Next）二次开发的时候用，尤其是团队协作开发，统一样式变量省了多对齐工作。
嗯，要注意的一点是：你的 SCSS 结构最好规范一点，变量名统一，否则注入进去也不好管。想了解 Webpack 加载器的细节？可以看看这篇webpack 加载器概述，讲得还挺清楚。
如果你在搞定制主题、或者在做多个子系统共享样式的项目，这工具可以试试，用起来还蛮顺的。
文件大小：4.33KB
评论区