Vue 项目样式文件结构

使用 Vue CLI 初始化项目，在 src 目录下新建 styles 目录。
styles 目录结构如下：

iconfont 是项目 iconfont 字体文件。
base.scss 为基础样式，放一些常用的公共的样式。
index.scss 为样式入口文件，导入其他样式文件。
minireset.scss 为 浏览器 reset 样式，是一个开源 npm 包。
reboot.scss 是对浏览器 reset 样式的补充。
variables.scss 定义公共的样式变量。

index.scss

@import "./reboot.scss";

@import "./base.scss";

@import "./iconfont/iconfont.css";

reboot.scss

@import "./minireset.scss";

html {
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-size: $font-size-base;
  font-family: $font-family-base;
  color: $color-text-base;
  background-color: $color-body-bg;
  line-height: $line-height-base;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

a {
  text-decoration: none;
  color: $color-link;
  transition: $transition-color;

  &:hover {
    color: $color-link-hover;
  }
}

a,
button,
input,
textarea {
  &:focus {
    outline: none;
  }
}

[v-cloak] {
  display: none
}

// 滚动条样式
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f6f6f6;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background: rgba(144, 147, 153, .4);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(144, 147, 153, 0.8);
}
::-webkit-scrollbar-corner {
  background: #f6f6f6;
}

minireset.scss

/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

ul {
  list-style: none;
}

button,
input,
select,
textarea {
  margin: 0;
}

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

img,
video {
  height: auto;
  max-width: 100%;
}

iframe {
  border: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

base.scss

/*
  按照 tailwind.css 定义
  https://tailwindcss.com/docs
*/
.w-full {
  width: 100%;
}
.h-full {
  height: 100%;
}
.cursor-pointer {
  cursor: pointer;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.underline {
  text-decoration: underline;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.container {
  width: 100%;
  @extend .mx-auto;

  @media (min-width: 640px) {
    max-width: 640px;
  }
  @media (min-width: 768px) {
    max-width: 768px;
  }
  @media (min-width: 1024px) {
    max-width: 1024px;
  }
  @media (min-width: 1280px) {
    max-width: 1280px;
  }
  @media (min-width: 1536px) {
    max-width: 1536px;
  }
}

.clearfix {
  &::before,
  &::after {
    content: '';
    display: table;
  }

  &::after {
    clear: both;
  }
}

.ell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-indent {
  text-indent: 2em;
}

.color-primary {
  color: $color-primary;
}

.color-warning {
  color: $color-warning;
}

variables.scss

// 参考：
// https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss
// https://github.com/ElemeFE/element/blob/dev/packages/theme-chalk/src/common/var.scss

// Variables
//
// Variables should follow the `$component-state-property-size` formula for
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.

// Color system
$white: #fff !default;
$black: #000 !default;

$color-primary: #409eff !default;
$color-primary-light-1: mix($white, $color-primary, 10%) !default;
$color-primary-light-2: mix($white, $color-primary, 20%) !default;
$color-primary-light-3: mix($white, $color-primary, 30%) !default;
$color-primary-light-4: mix($white, $color-primary, 40%) !default;
$color-primary-light-5: mix($white, $color-primary, 50%) !default;
$color-primary-light-6: mix($white, $color-primary, 60%) !default;
$color-primary-light-7: mix($white, $color-primary, 70%) !default;
$color-primary-light-8: mix($white, $color-primary, 80%) !default;
$color-primary-light-9: mix($white, $color-primary, 90%) !default;

$color-info: #909399 !default;
$color-success: #67C23A !default;
$color-warning: #E6A23C !default;
$color-error: #F56C6C !default;
$color-disabled: #bbb;

$color-text-base: #606266 !default;
$color-text-primary: #303133 !default;
$color-text-secondary: #909399 !default;

$color-bg-base: #F5F7FA !default;
$color-bg-lazyload: #e8e8e8 !default;

$color-link: $color-primary-light-2 !default;
$color-link-hover: $color-primary !default;

$color-border-base: #DCDFE6 !default;
$color-border-light: #E4E7ED !default;
$color-border-lighter: #EBEEF5 !default;

$color-body-bg: #e9f1f4 !default;

// Fonts
// Font, line-height, and color for body text, headings, and more.
$font-size-base: 14px !default;
$font-size-xs: 12px !default;
$font-size-sm: 13px !default;
$font-size-md: 16px !default;
$font-size-lg: 18px !default;
$font-size-xl: 22px !default;

$line-height-base: 1.5 !default;

$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Microsoft YaHei, Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base: $font-family-sans-serif !default;

// Border
$border-width-base: 1px !default;
$border-style-base: solid !default;
$border-color-base: $color-border-base !default;
$border-color-light: $color-border-light !default;
$border-color-lighter: $color-border-lighter !default;
$border-base: $border-width-base $border-style-base $border-color-base !default;

$border-radius-base: 4px !default;
$border-radius-sm: 2px !default;
$border-radius-md: 6px !default;
$border-radius-lg: 8px !default;

// Gutter
$gutter-xs: 4px !default;
$gutter-sm: 10px !default;
$gutter-base: 12px !default;
$gutter-md: 16px !default;
$gutter-lg: 24px !default;
$gutter-xl: 36px !default;

// Box-shadow
$box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04) !default;
$box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12) !default;
$box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;

// Transition
$transition-base: all .3s cubic-bezier(.645,.045,.355,1) !default;
$transition-fade: opacity .3s cubic-bezier(0.23, 1, 0.32, 1) !default;
$transition-color: color .2s cubic-bezier(.645,.045,.355,1) !default;

// Z-index
$zindex-base: 1 !default;

配置 vue.config.js 文件，项目共享 scss 变量。这样在项目的任何 .vue 组件中也可以直接使用 scss 变量啦。

module.exports = {
  // ...
	css: {
    loaderOptions: {
      sass: {
        prependData: '@import "~@/styles/variables.scss";'
      }
    }
  },
  // ...
}