Numbers Prefer Multiplication

    tsl-theme

    0.3.0 • Public • Published

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

    Keywords

    Install

    npm i tsl-theme

    DownloadsWeekly Downloads

    1

    Version

    0.3.0

    License

    ISC

    Unpacked Size

    2.51 MB

    Total Files

    282

    Last publish

    Collaborators

    • yangxun