Vue-CLI 3：如何在 webpack 包中包含 /src 目录外部的 LESS 文件？

Question

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

在生产环境中构建时，我们需要链接到 styles 的外部文件夹，如下所示： /assets/styles/main.css

目录结构：

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

我应该链接 WebPack还是更新加载程序选项？

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
      }
    }
  }

非常感谢对此的任何指导。

Answer 1

您首先需要安装这些包，需要 less-loader 将.less文件转换为.css文件。

npm install concurrently less less-loader less-watch-compiler --save-dev

其次，在您的根文件夹中添加less-watcher.config.json文件，并将以下代码放入其中。

{
    "watchFolder": "Styles/",
    "outputFolder": "Styles/",
    "sourceMap": true,
    "runOnce": false,
    "enableJs": true
  }

请注意， watchFolder应该是所有.less文件所在的文件夹， outputFolder是生成的.css文件所在的文件夹。

现在在您的packages.json文件中，在脚本object 中添加此代码

"start": "concurrently --kill-others \"less-watch-compiler --config less-watcher.config.json\" \"webpack-dev-server --open --mode development\""

这将确保无论何时开始运行 npm，它都会在运行项目之前重新生成.css文件。

最后在你的index.js文件中导入.css文件

import "../Styles/app/main.css";

您的文件夹/文件结构