在Vue-cli 4.x 中配置样式

在使用vue-cli 4.x搭建项目完毕后,你可以选择在项目目录下创建"style"文件夹,在里面创建scss文件来作为全局可用的样式文件.

为什么要配置全局样式

其实也可以选择不创建全局样式文件,如果你愿意每创建一个页面都在它目录下的独有scss文件中重新规定它的所有样式…

所以建立它吧,这会让你省下那些重复的工作.

一、插件准备

你需要安装3个插件: dart-sass & sass-resources-loader & sass-loader
安装dart-sass & sassresource-loader

npm install sass sass-loader -D
//这个指令会安装dart-sass和sass-loader;
//node-sass安装中经常出现各种问题;
//性能也比不上dart-sass,在2020年末被替代;

安装sass-resources-loader

npm i sass-resources-loader -D
//ver2.2.2,当前的最新版;

我的配置信息:

二、开始配置

1.vue.config.js配置

你可能已经发现在vue-cli4.x创建的项目中不再有config和dist了,对,所有的配置我们都要在vue.config.js中完成.
那么,在项目目录下直接创建vue.config.js,然后进入下一步.

module.exports = {publicPath: process.env.NODE_ENV === 'production' ? '' : '/',outputDir: process.env.NODE_ENV === 'production' ? 'dist' : 'devDist',lintOnSave: false,css: {loaderOptions: {scss: {AdditionalData: `@import "./src/style/main.scss";`/*ver8.x改为prependData: `@import "./src/style/main.scss";`,运行时请去掉本注释 */}}}
}

因为我们现在只配置全局scss需要的配置,那…
我就只写这一部分需要的配置了,如果想一步到位的话CSDN搜索vue-cli4 vue.config.js配置即可.

.App.vue配置

很简单的一步,在App.vue的< style >标签中加入lang属性:

<style lang="scss">

即可.

好吧,我们在全局scss文件里随便写点什么:

body {background-color: rgb(177, 60, 82);
}

到此说明我们的全局scss文件引入成功了.

附1-全局样式不显示的部分可能

1.检查是否出现浏览器默认样式覆盖

浏览器会自带着对于生效的样式,这个样式有时会盖过我们赋予页面的样式,呼出控制台,进入样式面板,取消对那些与你的样式发生冲突的样式的勾选,观察样式是否生效.

如果你进行了这步后全局样式生效了,那么你需要寻找并下载一个重置浏览器样式的css文件normalize.scss,在main.scss即全局样式文件内将其引入即可.

2.检查是否出现第三方插件样式覆盖

就拿我在用的ant-design-vue来说,它的包内就有一个"antd.css"文件,内部的background-color样式就会与我的全局样式产生冲突.

附2-Vue页面控件单独样式配置

我想你可以看到你的那些页面都是在View这个文件夹里的?就在这里面创建某个页面的专属样式文件,然后在需要的文件内import引入即可.
如图,在View目录下创建scss文件.

好的,然后在Login.vue内引入它.

总结

前段时间参加了学校的HTML5设计大赛…
为了爆肝作品一直都没更新,前天交了作品,是时候该赶赶进度了! XD

Vue-cli 4.x 中的全局样式配置相关推荐

Vue CLI 3开发中试用UIkit 3组件库
一.UIkit组件库与vuikit简介在选择好意中的前端开发基本框架后,接下来一个重要任务就是选择一款好的UI组件库.其中,UIkit组件库是一款基于Less+JS的一款轻量级.模块化.响应式的前端 ...
Vue CLI 3开发中屏蔽烦人的EsLint错误
问题 Vue开发中,特别是当你阅读分析别人的其中早期版本的Vue代码时往往会遭遇到满屏幕的烦人的EsLint错误.有关EsLint这个工具的作用不再赘述.查阅网上参考文档,大多是针对早起版本Vue C ...
Vue CLI 3.0脚手架如何在本地配置mock数据
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...
Vue CLI 3.0脚手架如何在本地配置mock数据json
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...
React中使用全局IP配置
平时请求后台数据接口时,由于不同环境下接口地址不同,常常需要修改多处请求的URL.现使用全局IP配置,使得只修改一处便可以切换不同环境,利于开发维护. 1.创建全局配置文件将不同环境的接口地址请求头 ...
vue移动端项目中统一滚动条样式与效果
写在前面原生的滚动条安卓端与苹果端有诸多不一样的地方,在我们的用户体验中,自然是想统一用户体验,而最常见的滚动条必然是要考虑在其中的,这篇文章主要是介绍vue项目中插件better-scroll的使 ...
ant design vue 的 description组件中 label 默认样式的更改
这两天做项目,需要实现一个如下图的效果于是我就去 ant design vue 里面找,发现 description 组件符合这个效果但是写完之后我发现,这个组件的 label 并不能修改样式啊, ...
vue cli 添加html,vue-cli创建的项目,配置多页面的实现方法
vue官方提供的命令行工具vue-cli,能够快速搭建单页应用.默认一个页面入口index.html,那么,如果我们需要多页面该如何配置,实际上也不复杂假设要新建的页面是rule,以下以rule为例 ...
QMUI全局样式配置
第一步: 第二步:

Vue-cli 4.x 中的全局样式配置