04- 在 Vite 中处理 CSS（关于学习 vite 打包工具的说明）

一、Vite中处理CSS

1.Vite和webpack的对比

vite天生就支持css文件的直接处理

webpack需要安装并配置 css-loader 和 style-loader | mini-css-extract-plugin ，处理 css 文件

2.Vite如何处理CSS的(了解)

1. vite在读取到main.js中引用到了Index.css
2. 直接去使用fs模块去读取index.css中文件内容
3. 直接创建一个style标签, 将index.css中文件内容直接copy进style标签里
4. 将style标签插入到index.html的head中
5. 将该css文件中的内容直接替换为js脚本(方便热更新或者css模块化), 同时设置Content-Type为js 从而让浏览器以JS脚本的形式来执行该css后缀的文件

3.Vite如何处理模块化CSS(重点)为了解决类名重复

1.在vite中处理模块化css步骤

1. module.css (module是一种约定, 表示需要开启css模块化)
2. 他会将你的所有类名进行一定规则的替换（将footer 替换成 _footer_i22st_1）
3. 同时创建一个映射对象{ footer: "_footer_i22st_1" }
4. 将替换过后的内容塞进style标签里然后放入到head标签中 (能够读到index.html的文件内容)
5. 将componentA.module.css内容进行全部抹除, 替换成JS脚本
6. 将创建的映射对象在脚本中进行默认导出

2.创建和使用

/**创建*/
1.创建一个compoment.module.css文件写入样式
.footer {
    width: 200px;
    height: 200px;
    background-color: beige;
}
.footer-content {
    width: 200px;
    height: 200px;
    background-color: var(--globalColor);
}

//使用
import componentCss from  "./componentA.module.css";
const div = document.createElement("div");

document.body.appendChild(div);
div.className = componentCss.footerContent;

二、配置模块化CSS

1.vite.config.js中css配置（modules篇）

在vite.config.js中我们通过css属性去控制正个vite对于css的处理行

1. localConvention: "camelCaseOnly"修改生成的配置对象的key的展示形式(驼峰还是中划线形式)

   export default defineConfig({
       css: {
           modules: {
               localsConvention: "camelCaseOnly",
           }
       }
   })
   

2. scopeBehaviour:"local" 配置当前的模块化行为是模块化还是全局化global | local (模块化加hash 全局化就是不改变类名)

   export default defineConfig({
       css: {
           modules: {
               scopeBehaviour: "local",
           }
       }
   })
   

3. generateScopedName:"[name][local][hash:5]"生成的类名的规则 (配置成字符串规则: github.com/webpack/loa…)

   export default defineConfig({
       css: {
           modules: {
              generateScopedName: (name, filename, css) => {
                    // name -> 代表的是你此刻css文件中的类名
                    // filename -> 是你当前css文件的绝对路径
                    // css -> 给的就是你当前样式
                   console.log("name", name, "filename", filename, "css", css); // 这一行会输出在哪？？？ 输出在node
                    // 配置成函数以后, 返回值就决定了他最终显示的类型
                    return `${name}_${Math.random().toString(36).substr(3, 8) }`;
                }
           }
       }
   })
   

4. hashPrefix:"Hello", 你配置的这个字符串会参与到最终的hash生成, （hash: 只要你的字符串有一个字不一样, 那么生成的hash就完全不一样, 但是只要你的字符串完全一样, 生成的hash就会一样）

   export default defineConfig({
       css: {
           modules: {
               hashPrefix: "hello"
           }
       }
   })
   

5. globalModulePaths:["./componentB.module.css"]代表你不想参与到css模块化的路径

   export default defineConfig({
       css: {
           modules: {
               globalModulePaths: ["./componentB.module.css"]
           }
       }
   })
   

三、Vite配置less预处理

1.vite配置文件中css配置流程(preprocessorOptions篇)

相关less的配置Less 教程_Less 中文网 (lesscss.com.cn)

export default defineConfig({
    css: {
        preprocessorOptions: { // key + config key代表预处理器的名
            less: { // 整个的配置对象都会最终给到less的执行参数（全局参数）中去
                // 在webpack里就给less-loader去配置就好了
                math: "always",
                globalVars: { // 全局变量
                    mainColor: "red",
                }
            },
        },
        devSourcemap: true,
    }
})

四、后处理器PostCss

vite天生对postcss有非常良好的支持

1.PostCss是什么?

PostCss是后处理器就像babel对css代码进行降级和兼容

需要下载不同的Plugins支持不同的功能

2.通用使用PostCss(webpack和vite都可以)

1. 安装依赖

   postcss-preset-env 包含了 必要的其他依赖

   yarn add postcss-preset-env -D
   

2. 创建配置文件文件 ( postcss.config.js )

   所需的Plugins

const postcssPresetEnv = require('postcss-preset-env');
// postcssPresetEnv一次吧必要的插件都装上
module.exports = {
 plugins: [
   	postcssPresetEnv(/* pluginOptions */)
   ],
}

3.Vite中使用PostCss

1.对高语法进行降级如

/** before */
.content {
    width: 800px;
    .main {
        width: clamp(100px, 30%, 200px);
        user-select: none; // 他在其他浏览器上不支持
    }
}
/** after */
.content {
    width: 800px;
    .main {
        width: max(100px, min(30%, 200px));
       -webkit-user-select: none;
    	-moz-user-select: none;
    	user-select: non
    }
}

import postcssPresetEnv from 'postcss-preset-env';
export default defineConfig({
    css: {
         postcss: {
           plugins: [
             postcssPresetEnv({})
           ],
         }
    }
})

4. 注意事项

1. 如果是vite+vue3 则 用postcss.config.js文件会报错

// 解决方案
postcss.config.cjs

2. 全局变量问题

import postcssPresetEnv from 'postcss-preset-env';
// const path = require("path"); // 做路径处理的   node用的其实是commonjs标准
import path from "path"; // 做路径处理的           vite只能用 esmodule 标准

export default defineConfig({
    css: {
         postcss: {
           plugins: [
            postcssPresetEnv({
            importFrom: path.resolve(__dirname, "./variable.css"), 
			// 就好比你现在让postcss去知道 有一些全局变量他需要记下来
            // 这样才能够在其他地方解析 使用时的变量 background: var(--globalColor)
        })
           ],
         }
    }
})

variable.css文件

/* 我们使用的一些未来的css特性是不需要经过less sass的预处理器进行编译, 我们只用交给postcss去处理 */
:root {
    --globalColor: lightblue;
}