Less loader in vue-cli project

Question

I am trying to use a less file in my vue-cli created project.

Also the question if this is best practice. Earlier I added webpack globally and started a watcher and added a webpack.config.js

This time I created the project with vue-cli / vue ui and the doc says I have to use a vue.config.js where I do this:

module.exports = {
css: {
    loaderOptions: {
        // pass options to sass-loader
        less: {
            // @/ is an alias to src/
            // so this assumes you have a file named `src/variables.scss`
            data: `@import "@/all.less";`
        }
    }
}
}

I added the file in src/all.less and also tried src/assets/less/all.less and changed the path in the config file. Both do not seem to work tho.

Answer 1

For me the issue was I had the language for one component set as "less" when I had in my config set up just vanilla css:

<style lang="less" scoped>
//styling here
</style>

instead of

<style lang="css" scoped>
//styling here
</style>

Answer 2

Changing the lang to CSS worked for me.

<style lang="css" scoped>
.vueStyle{
color: orange;
}
</style>    

Thanks

Answer 3

If you are using vue cli 3 . just use less right in your vue file, just set the lang to "less" or "scss" - pretty handy. There should be no additional configuration on the webpack side :

<style lang="less">

@import './less/index.less';