<style lang="less"> results in module parse errors

[Znegl]

Version

2.0.0

Reproduction link

https://play.nativescript.org/?template=play-vue&id=pHZ9Hp

Platform and OS info

macOS 10.14.4

Steps to reproduce

1. Add the lang="less" attribute to the style tag in any Vue component
2. Install the LESS dependencies (optional, since it will break anyways) npm i less less-loader --save-dev
3. Run it tns run ios --hmr
4. Observe the error in the terminal:

JS ERROR Error: Module parse failed: Unexpected token (23:10)
You may need an appropriate loader to handle this file type.
|
|
> ActionBar {

It seems like adding the lang attribute breaks the parsing of Vue files completely regardless og the attribute value.

Example style

<style lang="less">
    ActionBar {
        background-color: #177faf;
        color: #ffffff;
    }
</style>

Please note

The provided link doesn't reproduce the same error as described, since the playground completely freezes when adding a lang attribute to the style tag. Furthermore the sourcemap generation fails on the playground when adding the NPM dependencies through the UI.

What is expected?

Successful parsing of style written in LESS.

What is actually happening?

The compiler breaks.

---

Not supporting LESS and other languages would be nice to have in the docs if it's intended not to work. Especially when preprocessor support might be a dealbreaker.

[rigor789]

You need to configure less in your webpack config by adding a module rule, something like

 {
                    test: /\.less$/,
                    use: [
                        'nativescript-dev-webpack/style-hot-loader',
                        'nativescript-dev-webpack/apply-css-loader.js',
                        { loader: "css-loader", options: { minimize: false, url: false } },
                        "less-loader",
                    ],
},

[nativescript-vue-bot]

We are locking this issue because it has been closed for more than 14 days.

If the issue comes up again please open a new issue with additional details.