Vue3+Vite+Scss项目踩坑记录(三)

1,516 阅读1分钟

前几篇

Vue3+Vite 如何全局导入Scss文件

背景:

  1. 在创建项目的时候会引入很多全局scss文件,包括css样式,sass变量等,但vite比较特殊,直接导入(通过App.vue引入)带有sass变量等特殊语法的文件无法生效,只能生效css样式。
  2. 如果使用参考链接里的方法可以使用,但会遇到第二个问题,vite的additionalData是会将设置的链接链接里的所有样式应用到每个组件中去,这样就会导致所有的组件都有了重复的样式,而且全局的css样式因为带上了scoped属性(类似body[data-v-128cec4e] { padding: 0; }),所以在App.vue中无法生效,比如重置样式(body { padding: 0; }

image.png

image.png

image.png

image.png

最终解决:将index.scss里的"全局普通样式"(body { padding: 0; })和"变量等特殊语法"($test-color: red;)拆分开来,将"变量scss文件"用参考链接里的additionalData方式导入,也可以导入多个文件,再将"全局普通scss样式文件"通过main.js或者App.vue的style里进行import导入即可。

参考链接:blog.csdn.net/domyself918…

Vite 引入Scss文件后不生效,被加上scoped生成的属性

解决:这里看上一个问题的解决方案即可。

lint-staged 导致文件丢失

解决:my.oschina.net/u/4594011/b… ,其实没丢失,自动git stash保存在本地了,太不友好了,git stash要是保存了就有提示就好了。 后续:查看了相关文章后,了解了下它的原理,所以会自动git stash segmentfault.com/a/119000001…

git stash pop 提示 “the followeing untracked working tree files would be overweiteen by merge”

解决:根本原因是远程与本地有冲突,但实际是改了文件夹大小写后导致冲突,修改了大小写后,会自动保留大写文件夹和小写文件夹,冲突之后必须要删掉原来的文件夹,然后从本地执行 git stash pop 才行。这块操作的时候需要非常谨慎,千万要小心执行git clear,我在一些文章中看到有人说执行这个,不非常明确作用的话,请小心操作。

git 大小写不敏感

解决:

方案一:修改 git 配置,使其大小写敏感。$ git config core.ignorecase false

方案二:命令修改名称,git mv A.js a1.js git mv a1.js a.js 执行两次是因为git mv的原理是删除原先的文件建立新的文件