mzohaibqc / antd-theme-webpack-plugin

A webpack plugin for Dynamic theme generation for Ant Design
https://mzohaibqc.github.io/antd-theme-webpack-plugin/index.html
370 stars 81 forks source link

Used in antdv, got some wrong styles #54

Open Robin-zero opened 4 years ago

Robin-zero commented 4 years ago

Describe the bug Used in antdv, but got some wrong styles in the color.less. I don't know where it comes from, although I have checked the various style files.

Show your code

const AntDesignThemePlugin = require("antd-theme-webpack-plugin");
const path = require("path");

const options = {
  antDir: path.join(__dirname, "../../node_modules/ant-design-vue"), //antd包位置
  stylesDir: path.join(__dirname, "../../src/styles"), //主题文件所在文件夹
  varFile: path.join(__dirname, "../../src/styles/variables.less"), // 自定义默认的主题色
  mainLessFile: path.join(__dirname, "../../src/styles/index.less"), // 项目中其他自定义的样式(如果不需要动态修改其他样式,该文件可以为空)
  outputFilePath: path.join(__dirname, "../../public/color.less"), //提取的less文件输出到什么地方
  themeVariables: ["@primary-color","@hover-color"], //要改变的主题变量
  indexFileName: "../../public/index.html", // index.html所在位置
  generateOnce: false // 是否只生成一次(if you don't want to generate color.less on each chnage in code to make build process fast in development mode, assign it true value. But if you have new changes in your styles, you need to re-run your build process npm start.)
}

const createThemeColorReplacerPlugin = () => new AntDesignThemePlugin(options)

module.exports = createThemeColorReplacerPlugin

vue.config.js

const createThemeColorReplacerPlugin = require('./script/themeConfig/plugin.config')
module.exports = {
  lintOnSave:false,
  productionSourceMap: false,
  configureWebpack: {
    // webpack plugins
    plugins: [
      createThemeColorReplacerPlugin()
    ],
  },
  css: {
    sourceMap: true,
    loaderOptions: {
      less: {
        javascriptEnabled: true,
        //定制antd 
        modifyVars: {
           //'primary-color': $color,
          // 'link-color': $color,
          'border-radius-base': '2px',
          'font-size-base': '12px',
          'menu-collapsed-width': '60px',
          'tabs-card-height': '35px',
          'carousel-dot-width': '30px',
          'carousel-dot-height': '6px'
        }
      },
      sass: {} //可以使用sass 为了统一风格都是用less
    }
  },
}

Screenshots Right Style should be like this: image

Wrong style like this: image image

the style code border: 0 solid #aaa; caused this problem!

Version "antd-theme-webpack-plugin": "^1.3.0", "ant-design-vue": "1.6.2",

mzohaibqc commented 4 years ago

@Robin-zero Have you tried latest version? Let me know if you were able to resolve this or not?