CODEWITHSUNDEEP
javascriptvue.jswebpacklessvue-cli-3
John
John

Reputation: 95

Vue-CLI 3: How to include LESS files from outside of /src directory in webpack bundle?

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.

Upvotes: 1

Views: 3003

Answers (1)

Adnan Shaukat
Adnan Shaukat

Reputation: 23

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

Upvotes: 0

Related Questions