tsl-theme

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
      },
    ],
  ],
};