VUE项目中，html 的CSS写在哪里比较好？

Question

VUE项目中，
像如下的css ，写在哪里以何种方式引入到项目中比较好？

html, body{
    margin:0;
    padding:0;
    height:100%;
    width:100%;
}
:root{
--blue:#007bff;
--indigo:#6610f2;
--purple:#6f42c1;
}
 *::-webkit-scrollbar {
                width: 6px;
                height: 8px;
            }

            *::-webkit-scrollbar-thumb {
                border-radius: 5px;
                -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
                background: rgba(0, 0, 0, 0.2);
            }

            *::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                border-radius: 0;
                background: rgba(0, 0, 0, 0.1);
            }

Answer 1

通用样式，公共样式，全局样式这些，可以定义成单独的css文件，然后在main.js中引入

import './assets/css/base.css'

这样就能在全局生效了。

如果是组件单独的样式，就写在.vue文件的中<style></style>标签内。

Answer 2

建个文件夹放起来，在main.js中引入