Vue.js - 将CSS(SCSS)与单个* .vue文件分开

时间:2017-09-29 14:54:40

标签: webpack sass vue.js vuejs2

默认的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模板?

1 个答案:

答案 0 :(得分:4)

您可以导入样式:

<template>
...
</template>

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

<script>
...
</script>

您必须安装sass-loaderconfigure your webpack: vue-loader