Vue.js-與單個* .vue文件分離的CSS（SCSS）

Question

Vue.js的默認概念是在一個* .vue文件中包含模板，JS和樣式。

我的問題是：如何從* .vue文件中划分CSS / SCSS並獲得以下結構：

components
-- componentA
---- componentA.vue
---- componentA.scss
-- componentB
---- componentB.vue
---- componentB.scss
-- componentC
---- componentC.vue
---- componentC.scss

是否有通過Webpack創建此類項目結構並構建main / dist CSS的良好實踐？ 有任何示例或Vue CLI模板嗎？

Answer 1

您可以導入樣式：

<template>
...
</template>

<style lang="scss">
    @import './foo.scss';
</style>

<script>
...
</script>

您將必須安裝sass-loader並配置您的webpack：vue-loader 。