vue-cli3.0 配置less全局变量失败

Question

问题描述

尝试在App.vue中引入less文件 也尝试在vue.config.js 中有如下配置

相关代码

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")]
    });
}

你期待的结果是什么？实际看到的错误信息又是什么？

 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

Answer 1

path.resolve不会识别@的吧. 把它改成相对路径吧