1. 安装 vite-plugin-html 插件, 并引入
import { createHtmlPlugin } from 'vite-plugin-html'
//...
export default ({ mode }) => {
//...
plugins: [
createHtmlPlugin({
inject: {
data: {
}
}
}),
//....
],
//...
}
//...
2. 定义所需要的数据
import path from 'node:path'
// ...
const vmDesignWidth = 3840 // 设计稿宽度
const vmDesignHeight = 1080 // 设计稿宽度
const minWindow = '1920Px' // 兼容最小宽度
const vmFontsize = 100
export default ({ mode }) => {
//...
plugins: [
createHtmlPlugin({
inject: {
data: {
}
}
}),
//....
],
//...
}
3. 将定义的数据作为额外数据给 scss
export default ({ mode }) => {
css: {
preprocessorOptions: {
scss: {
additionalData: `
$vmDesignWidth: ${vmDesignWidth};
$vmDesignHeight: ${vmDesignHeight};
$minWindow: ${minWindow};
$vmFontsize: ${vmFontsize};
`
}
}
},
//...
})
4. 将定义的数据通过 vite-plugin-html 插件暴露给 html 模板
export default ({ mode }) => {
//...
plugins: [
createHtmlPlugin({
inject: {
data: {
_designWidth: JSON.stringify(vmDesignWidth),
_designHeight: JSON.stringify(vmDesignHeight),
_minWindow: JSON.stringify(minWindow),
_fontSize: JSON.stringify(vmFontsize),
}
}
}),
//....
],
//...
}
5. 修改 index.html 模板
<head>
<!-- ... -->
<script>
window._designWidth = JSON.parse('<%- _designWidth %>')
window._designHeight = JSON.parse('<%- _designHeight %>')
window._minWindow = JSON.parse('<%- _minWindow %>')
window._fontSize = JSON.parse('<%- _fontSize %>')
</script>
<!-- ... -->
</head>
6. 这样就可以在 scss 和 js 中使用定义的变量了
:root {
--design-width: #{$vmDesignWidth}px;
--design-height: #{$vmDesignHeight}px;
}
#app, #root, .global-wrap {
width: var(--design-width);
height: var(--design-height);
}
const { width } = $(useWindowSize())
const singleHeight = $computed(() => parseInt(32 * width / window._designWidth, 10))
7. 问题
这种方法, 数据只能是常量, 不能是变量
