current position:Home>Vue cli configuring preprocessor global variables (take less as an example)

Vue cli configuring preprocessor global variables (take less as an example)

2022-05-15 02:13:46Maple moving forward

vue Officials offer two ways

1.style-resources-loader

2.vue-cli-plugin-style-resources-loader

Use the first method to pass by yourself npm Errors are often reported during installation :

TypeError: Cannot read property 'style-resources-loader' of undefined

perhaps   variable xxx is undefined

therefore , Delete style-resources-loader( although vue-cli-plugin Your plug-in will still install this ), We directly use the second method to pass vue add To install :

1. install :vue add style-resources-loader

2. Select the appropriate preprocessor

3.vue.config.js Middle configuration pluginOptions

const path = require("path")

module.exports = {
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [
        path.resolve(__dirname, "./src/assets/css/common/varible.less"),
      ], //  Introduce global style variables 
    },
  },
}

  If you want to import automatically , You can see the example on the official website CSS relevant | Vue CLI

copyright notice
author[Maple moving forward],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/132/202205120524479976.html

Random recommended