Because Baidu is not very like to include language sparrow on the article, so the recent plan to put language sparrow record some things moved to CSDN and nuggets, the content of the article may be on the front end of the old driver no fresh ha! No blame no blame! But I will still be learning in front of the pit recorded, convenient beginners cross pit ha!

background

<style></style> </style> </style> </style> I had to go to the official document to solve it, but unfortunately I couldn’t read it at all… The official documentation gives several ways to change styles, but HERE I recommend using less to cover styles. First let’s take a look at what the official documentation says:

The problems with the above documents are:

1. __at__ refers to @, which cannot be written in main.js. If you drop @ and write import “~ant-design-vue/dist/antd.less”, NPM run dev will fail.

2. The same error occurs when the preceding code is written in the less file created by the user. To do this, write the following code to your own less file:

@import "~ant-design-vue/dist/antd.less"; // Introduce the official provided less style entry file @import"your-theme-file.less"; // Used to override the variables defined aboveCopy the code

Unfortunately, it doesn’t work either. The correct way to write it is this (see steps) :

steps

1. Add less and less-loader dependencies

To ensure that the less and less-loader dependencies are correctly installed, enter the following command on the console:

npm install --save-dev less-loader lessCopy the code

Download too slow, please switch to CNPM download.

2. Open javascriptEnabled

Note: the following three ways to choose a suitable for their own.

webpack@4: Modify the webpack.config.js file:

// webpack.config.js
module.exports = {
  rules: [{
    test: /\.less$/,
    use: [{
      loader: 'style-loader',
    }, {
      loader: 'css-loader', // translates CSS into CommonJS
    }, {
      loader: 'less-loader', // compiles Less to CSS
      options: {javascriptEnabled: true},
    }],
    // ...other rules
  }],
  // ...other config
}Copy the code

Note: the scope of less-loader does not filter antD packages under node_modules.

Vue-cli 2: Modify the build/utils.js file:

// build/utils.js
// less: generateLoaders('less'),
less: generateLoaders('less', {javascriptEnabled: true}),Copy the code

Vue -cli 3&4: Modify the vue.config.js file (if it does not exist, create a new one) :

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      less: {javascriptEnabled: true}}}}Copy the code

3. Create reset.less to reset the style

Create a new less file under the static folder of your project, using reset.less as an example.

4. Add style references

Install the ant-design-vue dependency yourself and add the following code to the SRC /main.js file:

// Just add uncommented lines //import Vue from'vue'
import Antd from 'ant-design-vue'
//import App from './App'
import '.. /static/reset.less'// -- > import reset.less. Make sure that the path is correct. //Vue.config.productionTip =false

Vue.use(Antd)

//new Vue({
//  el: '#app',
//  components: { App },
//  template: '<App/>'/ /})Copy the code

5. Add test code

Add an ANTD style button to helloWorld.vue under SRC/Components, as shown below:

6. Add overlay styles

To test the override style, add the following code to the reset.less folder you just created:

@import '~ant-design-vue/dist/antd.less'; // -- > suffix is less, do not write CSS. .ant-btn-primary { background-color:#F56C6C;
  border-color: #F56C6C;
}
.ant-btn-primary:hover, .ant-btn-primary:focus {
  background-color: #f55252;
  border-color: #f55252;
}Copy the code

Then proceed to NPM run dev, and the browser should display something like this:

Buttons become red instead of the blue default. If it doesn’t work or the compilation fails, try downgrading the less dependency to 2.7.3 (the less-Loader version doesn’t care).

This article is edited by the West pomelo team – left handed feng Zi, please attach the original link when reprinting, thank you for your cooperation!


Western pomelo official website:
www.seeyoz.cn/