Vue-CLI 3：如何在Webpack捆绑包中从/ src目录外部包括LESS文件？

Question

我正在寻找一种方法，将位于Vue-Cli项目的/ src目录之外的.less文件包含到我的webpack捆绑包中。需要这些.less文件仅包含在“开发”模式下。

在生产环境中构建时，我们需要链接到外部文件夹，以获取如下样式： /assets/styles/main.css

目录结构：

Vue-Project
|-- /Styles
|   `-- app
|       `-- styles
|           |-- main.less
|           `-- atoms/modules/etc
|               `-- *.less
|-- /src
`-- vue.config.js

我应该是Chaining WebPack还是Updating Loader Options？

vue.config.js：

module.exports = {
  lintOnSave: false,

  configureWebpack: config => {
    if (process.env.NODE_ENV === "production") {
      // mutate config for production...
    } else {
      // mutate for development...

      // CONFIG LESS FILES HERE?

    }
  }
};

尝试了以下操作，但没有成功：

css: {
    loaderOptions: {
      less: {
        data: `@import "@/styles/main.less";`
        // @imported .less files from Styles/app/styles/main.less etc into src/styles/main.less
      }
    }
  }

对此有任何指导。