vue-cli3.0 configure Iview custom theme

Time:2022-11-24

don’t panic, followIviewCome on, probably . . . no problem!

1. Create a new my-them.less

@import '~view-design/src/styles/index.less';

/*Theme configuration and other configurations refer to https://github.com/view-design/ViewUI/blob/master/src/styles/custom.less*/
@primary-color: #6C86FF;
@link-hover-color: #6C86FF;

2. Import the entry file main.js

import './assets/css/my-them.less';

illustrate

  • The less file needs to be supported here, and the project should install less and less-loader
// cannot exceed the next two version numbers below
npm install [email protected] [email protected] -D
  • vue.config.js configuration
module.exports = {
    css:{ 
        // css presetter configuration item
        loaderOptions: {
            less: {
                javascriptEnabled: true
            }
        }
    }
}