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

Question

I'm looking for a way to include.less files that live outside of the /src directory of my Vue-Cli project into my webpack bundle. Need these.less files to only be included in 'development' mode .

When built in a Production environment, we'll need to link to external folder for styles which looks like: /assets/styles/main.css

Directory Structure:

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

Should I be Chaining WebPack or 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?

    }
  }
};

Tried the following, but didn't work:

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

Any guidance on this is much appreciated.

Answer 1

You first need to install these packages, less-loader will be required to convert the .less files into .css files.

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

Secondly, add less-watcher.config.json file in your root folder and place the following code in it.

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

Note that watchFolder should be the folder where all your .less files are loacated, and outputFolder is the folder where generated .css files will be placed.

Now in your packages.json file add this code inside scripts object

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

This will ensure that whenever your run npm start it will regenerate the .css files before running the project.

Finally in your index.js file import the .css file

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

Your folder/files structure