YoungtiNine的博客

1.1 编辑器统一编码规范 # http://editorconfig.org root = true [*] # 表示所有文件适用 charset = utf-8 # 设置文件字符集为 utf-8 indent_style = space # 缩进风格（tab | space） indent_size = 2 # 缩进大小 end_of_line = lf # 控制换行类型(lf | cr | crlf) trim_trailing_whitespace = true # 去除行首的任意空白字符 in

1. 场景 今天想要给vite项目，添加全局的scss变量文件引用，这样我们在使用scss变量和函数的时候就不需要每个组件都取引用了 2. 官方代码 export default defineConfig({ css: { preprocessorOptions: { scss: { additionalData: `$injectedColor: orange;` } } } }) 3. 问题 在如上面代码所示进行配置的时候，在vite进行

实现方式 Vite2采用的是Connect进行连接和转发(Vite1使用的是Koa) 转发步骤 通过请求对应的文件，如果是JS后缀的文件那么直接进行返回，如果是不能被浏览器直接识别的文件，那么就通过Connect进行一层转发 本地服务器去查找对应源代码，然后通过Vite的一些编译和转换，将不能直接识别的文件，转换为ES6的JS代码，然后将这个JS代码在发送给浏览器 浏览器就完成更新和渲染页面 ...

在比较新的版本的浏览器当中，我们可以通过下面的代码使用ES6中的import和export，本质就是把每一次导入导出当作一次浏览器的请求 HTML: JS: import ‘./module.js’ // 必须加上js后缀，此时还没有打包工具来帮我们配置查找后缀 但是 浏览器只能识别js,如果我们想要识别其他后缀的文件，例如ts,vue,less,scss等，就不能做到 再者如果我们使用import的形式引入了第三方包中的一个A文件，如果该文件还依赖了其他的js文件的话，那么在浏览器请求加载A文件的时候，