failed with CssSyntaxError when use less-loader

[towertop]

I'm using less-loader to support less code within vue file. This way should work according to document at https://vue-loader.vuejs.org/en/options.html .

version:

    "vue-loader": "^11.3.3",
    "webpack": "^2.3.2",

webpack.config.js:

      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            typescript: 'ts-loader',
            less: 'less-loader'
          }
        }
      },

code:

<template>
  <div>This will be pre-compiled</div>

</template>
<script lang="typescript" src="./test.ts"></script>
<style lang="less" src="./test.less"></style>

error:

ERROR in ./~/less-loader/dist!./~/vue-loader/lib/style-compiler?{"id":"data-v-67a49362","scoped":false,"hasInlineConfig":false}!./components/test.less
Module build failed: CssSyntaxError: C:\Users\Edward\Documents\xx\xxx\spa\components\test.less:8:3: Unknown word

Obviously, vue-loader is putting style-compiler before the less-loader internally. And style-compiler crash into the LESS code before transpile.

The prefixing of style-compiler was added from commit:
8e38245

Did you overlook LESS supporting？

[towertop]

well, this way works around:

      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            typescript: 'ts-loader',
            less: 'vue-style-loader!css-loader!less-loader'
          }
        }
      },

Not sure this is the right as documented.

[yyx990803]

That's correct - when you use custom loaders you need to provide the full loader chain. Alternatively you can use preLoaders.

[sueblue]

That's correct - when you use custom loaders you need to provide the full loader chain. Alternatively you can use preLoaders.

how to use preLoaders (in vue.config.js)？ I was new to the webpack and vue

[sueblue]

well, this way works around:

      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            typescript: 'ts-loader',
            less: 'vue-style-loader!css-loader!less-loader'
          }
        }
      },

Not sure this is the right as documented.

yeah!　use this I fixed this problem . but get a new error:

Failed to mount component: template or render function not defined.

found in

---> at src/App.vue

confused!