vue项目实战系列十七：集成CSS

最新推荐文章于 2024-09-24 11:41:48 发布

完美句号

最新推荐文章于 2024-09-24 11:41:48 发布

阅读量378

点赞数 8

文章标签： vue.js css 前端性能优化系统架构架构软件工程

本文链接：https://blog.csdn.net/wanmeijuhao/article/details/135303713

版权

本文介绍了在Vue项目中如何使用Scss和Less进行样式管理，包括局部和全局样式组织，以及如何在Vue.config.js中配置Sass加载全局变量和Mixins。同时，还提及了如何利用NProgress实现页面加载进度条和保持滚动条样式一致性。

摘要由CSDN通过智能技术生成

1. css:

①. Scss:
    a. element UI库就用Scss.

②. Less:
    a. less为了覆盖ant design vue样式.

(1). 局部样式:

<style lang="scss" scoped>
  ...
</style>

(2). 全局样式:

全局样式 目录：@/styles

variable.scss: 全局变量管理 mixins.scss: 全局 Mixins 管理 global.scss: 全局样式

其中 variable.scss 和 mixins.scss 会优先于 global.css 加载，并且可以不通过 import 的方式在项目中任何位置使用这些变量和 mixins。


// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `
        @import '@/styles/variable.scss';
        @import '@/styles/mixins.scss';
        `,
      },
    },
  },
}

页面载入进度条
使用 nprogress 对路由跳转时做一个伪进度条，这样做在网络不好的情况下可以让用户知道页面已经在加载了：

import NProgress from 'nprogress';

router.beforeEach(() => {
  NProgress.start();
});

router.afterEach(() => {
  NProgress.done();
});

美化滚动条
一直用 Mac 做前端，突然发现同事的 Windows 上出现了十分丑陋的滚动条，为了保持一致：

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  width: 6px;
  background: rgba(#101F1C, 0.1);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(#101F1C, 0.5);
  background-clip: padding-box;
  min-height: 28px;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(#101F1C, 1);
}