MastFancy

vite多入口项目，使用了pxtorem，打包时exclude没有完全生效，如何解决？

vite版本5.3.5，nodejs版本20.12.2，项目3个入口，默认的index.html是PC端入口，另外两个是移动端，移动端需要用pxtorem转换，PC端不转换，我通过配置exclude来判断。 打包时PC端一部分页面的样式会被转换，甚至有的对应到源码同一个vue文件中，一部分px会被转成rem，一部分还是px，但我通过在配置的exclude方法中console.log时，发现并不包含PC端的文件。 在不分项目的情况下，这个问题能否解决？如何解决？ 开发模式下一切正常 vite.config.js import { defineConfig, loadEnv } from "vite"; import path from "path"; import createVitePlugins from "./vite/plugins"; import history from "connect-history-api-fallback"; import postCssPxToRem from "postcss-pxtorem"; const includelist = ["src/largetext", "src/views/mobile", "node_modules/vant"]; export default defineConfig(({ mode, command }) => { return { plugins: [ ...createVitePlugins(loadEnv(mode, process.cwd()), command === "build"), { name: "vite-plugin-history", configureServer(server) { server.middlewares.use( history({ rewrites: [ { from: /^\/mobile/, to: "/webview.html" }, { from: /^\/largetext/, to: "/largetext.html" } ], htmlAcceptHeaders: ["text/html", "application/xhtml+xml"] }) ); } } ], resolve: { alias: { "~": path.resolve(__dirname, "./"), "@": path.resolve(__dirname, "./src") }, extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"] }, server: { port: 4080, host: true, open: true }, css: { postcss: { plugins: [ { postcssPlugin: "internal:charset-removal", AtRule: { charset: (atRule) => { if (atRule.name === "charset") { atRule.remove(); } } } }, postCssPxToRem({ rootValue: 37.5, propList: ["*"], exclude(file) { return includelist.every((path) => !file.includes(path)); } }) ] } }, build: { rollupOptions: { input: { pc: path.resolve(__dirname, "index.html"), webview: path.resolve(__dirname, "webview.html"), largetext: path.resolve(__dirname, "largetext.html") } } } }; }); 一开始我的nodejs版本是18.x，升到20以后打包正常了，我以为是nodejs版本问题，但第二次打包就又出现了问题，之后不断测试发现，出问题的页面是随机的。

通了顺畅了

Tailwind CSS的@tailwindcss base指令导入了哪些基础样式？

"@tailwindcss base"导入了哪些基础样式？从哪里（代码库中的哪个或哪些文件）可以获知？还是说它并没有导入任何样式，但是我们可以通过以下方式声明一些样式，然后这些样式按照"@tailwindcss"的声明顺序来应用。 @tailwindcss base; @tailwindcss components; @tailwindcss utilities; @layer base{ ... } @layer component { .... }

CTang

vue安装rem插件（npm i px2rem-loader -D）使其自适应屏幕大小，但为什么刷新后才能达到预期效果？

在vue.config.js配置 const px2rem = require('postcss-px2rem'); const postcss = px2rem({ remUnit: 192 //基准大小 baseSize，需要和rem.js中相同 }); css: { loaderOptions: { postcss: { plugins: [postcss] } }, }, main.js配置 import './utils/flexible'; import { setRemInit } from './utils/rem'; setRemInit(); //进行初始化立即运行 刷新前： "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241210/98f3387a033f7263a8426b362e29f688.png) 刷新后（想要的效果）: "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241210/7bf15f37c410fa56a33636b818071e2d.png) 若是返回前一个页面，页面内容字体仍然会变小