Writing in the front

Good evening ah, we develop the application of some of the styles are common, such as our common with colored value, in order to achieve the goal that unified changes often need to define a less variable, a lot of business components you need to use these variables, if we each business component are introduced and then used manually, potential is huge, so in order to solve this problem, We use automatic imports to make it easier for our business components to use global LESS variables.

1. Manually introduce the scheme

1) prepare style variable file SRC/styles/variables. The less

/ / theme @ xtxColor: # 27 ba9b; / / assist @ helpColor: # E26237; / / @ sucColor success: # 1 dc779; / / warning: @ warnColor # FFB302; / / price @ priceColor: # CF4444;Copy the code

2) Manually introduce variables to use

Do a simple test in the app.vue file

<template> <! <router-view /> <div class="test"> <div > </template> <style lang="less" scoped Import "~@/styles/ variable. less"; .test { color: @xtxColor; } </style>Copy the code

Conclusion:

  1. Variables defined by less files that need to be imported separately for use in components (each component needs to be imported for use)
  2. Add wavy line before import

2, automatic introduction scheme

Solution: Use the style-resoures-loader plug-in of VUe-CLI to complete automatic injection of style tags into each VUE component.

1) Run **vue add style-resources-loader** to add a vue-CLI plug-in to the current project

​

2) After installation, the configuration will be automatically added in vue.config.js as follows:

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: []
    }
  }
}
Copy the code

3) Configure the files to be injected and restart the service

const path = require('path') module.exports = { pluginOptions: { 'style-resources-loader': { preProcessor: 'less' patterns: [/ / configuration which files need to automatically import path. Join (__dirname, '. / SRC/styles/variables. Less ')]}}}Copy the code

To test this, we no longer need to manually import less files from the component. We can use them directly.

Conclusion:

  1. Plug-ins for Vue scaffolding aid in automatic import of LESS files
  2. Manual imports are not required for subsequent use of less variables by other components

Write in the last

That’s all today’s content, remember one key three even, hey hey!