Question

我在npm包中有一个导出vue组件的索引：

import HelloWorld from './HelloWorld/HelloWorld.vue'
import ByeWorld from './ByeWorld/ByeWorld.vue'

export {
    HelloWorld,
    ByeWorld
}

在首页项目中，有一个带有HelloWord导入的页面：

<template>
  <div class="home">
    <HelloWorld />
  </div>
</template>

<script>
import { HelloWorld } from 'test-project-f/src/components';

export default {
  name: 'home',
  components: {
    HelloWorld
  }
}
</script>

使用F12工具的检查页面。我们可以看到vue注入了两个scss而不是只注入HelloWord。整个项目中没有ByeWorld的引用

<style type="text/css">.hello[data-v-541c6422] {
  color: green;
}
</style>
<style type="text/css">.bye[data-v-ef3e2c3c] {
  color: cadetblue;
}
</style>

为什么？有谁知道如何仅导入必要的scss导入？

我尝试了很多方法：

全部导入索引
就像一个vue-cli包（vue-cli-service build --target lib --name myLib ./src/components/index.js）

HelloWorld：

<template>
    <div class="hello">
        <p>Hello</p>
    </div>
</template>

<script>
    export default {
        name: 'HelloWorld'
    }
</script>

<style lang="scss" scoped>
  .hello {
    color: green;
  }
</style>

ByeWorld：

<template>
    <div class="bye">
        <p>bye</p>
    </div>
</template>

<script>
    export default {
        name: 'ByeWorld'
    }
</script>

<style lang="scss" scoped>
  .bye {
    color: cadetblue;
  }
</style>

使用VUE导入未使用的SCSS文件

0 个答案: