Vue-cli3.0 failed to configure less global variable

problem description

try to introduce the less file into App.vue and also try to have the following configuration in vue.config.js

related codes

module.exports = {
  ...
  chainWebpack: config => {
    /*const types = ["vue-modules", "vue", "normal-modules", "normal"];
    types.forEach(type =>
      addStyleResource(config.module.rule("less").oneOf(type))
    );*/
  },
  css: {
    loaderOptions: {
      less: {
        resources: [path.resolve(__dirname, "@/assets/css/common.less")]
      }
    }
  }
};
function addStyleResource(rule) {
  rule
    .use("style-resource")
    .loader("style-resources-loader")
    .options({
      patterns: [path.resolve(__dirname, "@/assets/css/common.less")]
    });
}

what result do you expect? What is the error message actually seen?

 error  in ./src/views/project/partyBuild/partyBuildInform.vue?vue&type=style&index=0&id=addaa0d0&scoped=true&lang=less&

Module build failed (from ./node_modules/less-loader/dist/cjs.js):


    height: 0.9rem;
    border-bottom: 0.16rem solid @search-bg;
                               ^
Variable @search-bg is undefined

clipboard.png

clipboard.png

clipboard.png

Mar.30,2022

clipboard.png
path.resolve won't recognize @ . Change it to a relative path

Menu