怎么vue子组件不能引入less文件?

Question

报错

ERROR in ./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-a16d6a82","scoped":true,"hasInlineConfig":false}!./~/less-loader/dist/cjs.js?{"sourceMap":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/com-middle.vue
Module build failed: 


@import './assets/css/less';
^
Can't resolve './assets/css/less.less' in 'D:\Web\develop\src\components'
      in D:\Web\develop\src\components\com-middle.vue (line 21, column 0)
 @ ./~/vue-style-loader!./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-a16d6a82","scoped":true,"hasInlineConfig":false}!./~/less-loader/dist/cjs.js?{"sourceMap":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/com-middle.vue 4:14-396 13:3-17:5 14:22-404
 @ ./src/components/com-middle.vue
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

less

// less.less
.W100 {width: 100%}
.H100 {height: 100%}

// style.less
@import 'less';
html,body{
    margin: 0;
    padding: 0;
    .H100;
}

vue

// app.vue 入口父组件
<template>
  <el-row class="H100 window">
    <el-col :span="24">444</el-col>
    <el-col :span="4" class="H100 menu">1</el-col>
    <el-col :span="20" class="H100 main">
      <com-middle class="dialog" window="full" name="Hello"></com-middle>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: 'app'
}
</script>
<style lang="less">
  @import './assets/css/style';
  .menu{
    background: #666;
  }
  .window{overflow: hidden;}
  .main{
    position: relative;
    overflow: hidden;
  }
</style>

// com-middle.vue 子组件
<template>
    <div class="wrapper full"><component :is="com"></component></div>
</template>
<script>
export default {
  computed: {
    com: function () {
      return require(`./${this.name}`)
    },
    windowClass: () => this.window
  },
  props: ['window', 'name']
}
</script>
<style lang="less" scoped>
@import './assets/css/less';
  .wrapper{
    position: absolute;
    background: red;
  }
  .full{
  }
  .small{
  }
</style>

现在问题很莫名其妙.我父组件里引用less文件没有任何问题.但我子组件只要引用就报错.

Answer 1

注意你的错误提示 Can't resolve './assets/css/less.less' in 'D:\Web\develop\src\components'，提示说找不到此文件，请检查你的路径是否正确。