Vue.js - 从单个 *.vue 文件中分离 CSS (SCSS)

Question

默认的 Vue.js 概念是将模板、JS 和样式放在一个 *.vue 文件中。

我的问题是：如何从 *.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。