0.3.0 • Published 3 years ago
tsl-theme v0.3.0
Using npm or yarn
We recommend using npm or yarn to install
$ npm install tsl-theme
Example For Ant-Design-Vue And Vant
vue.config.js
// vue.config.js for less-loader@6.0.0
const path = require("path");
let cmdString = ""; //配置传入的参数
当前可选项为ant-design-vue.orange, ant-design-vue.yellow,ant-design-vue.green,
vant.orange, vant.yellow,vant.green
默认主题则为空
//less文件的路径
const myTheme = path.resolve(__dirname,`./node_modules/tsl-theme/${cmdString}.less`);
module.exports = {
publicPath: "./",
css: {
loaderOptions: {
less: {
lessOptions: {
modifyVars: cmdString ? { hack: `true; @import "${myTheme}";` } : {}, //加载less文件实现主题覆盖
javascriptEnabled: true,
},
},
},
},
};
Tip
若 less-loader 版本小于 6.0,请移除 lessOptions 这一级,直接配置选项。
若引入方式为全局引入,需要引入 less 文件
若引入方式为按需加载,则需修改 babel.config.js
ant-design-vue
module.exports = {
presets: ["@vue/app"],
plugins: [
[
"import",
{ libraryName: "ant-design-vue", libraryDirectory: "es", style: true } //style设置为true引入less文件
]
]
};
vant
module.exports = {
plugins: [
[
'import',
{
libraryName: 'vant',
libraryDirectory: 'es',
// 指定样式路径
style: (name) => `${name}/style/less`,
},
'vant',
],
],
};
Example For Element Ui
全局引入
main.js 中配置
import Vue from "vue";
import App from "./App.vue";
import ElementUI from "element-ui";
// import "element-ui/lib/theme-chalk/index.css";
import "../node_modules/tsl-theme/element.orange/index.css"; //引入主题css文件,element.orange可替换为element.yellow,element.green
Vue.use(ElementUI);
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App),
}).$mount("#app");
按需引入
babel.config.js 中配置
module.exports = {
plugins: [
[
"component",
{
libraryName: "element-ui",
styleLibraryName: "~node_modules/tsl-theme/element.orange", //按需加载主题css文件,element.orange可替换为element.yellow,element.green
},
],
],
};