1. 新建一个 js/ts 文件, 定义好常量
// design.config.ts
/** 设计稿宽度, 此处最好就是按 1920 来计算, 避免 element-ui 之类 UI 框架出现字体不对 */
export const designWidth = 1920
/** 设计稿宽度, 此处最好就是按 1920 来计算, 避免 element-ui 之类 UI 框架出现字体不对 */
export const designHeight = 1080
/** 设计稿倍数 */
export const designMultiple = designWidth / 1920
/** 兼容最小宽度 */
export const minWidth = 1440
/** 兼容最小宽度(px) */
export const minWindow = `${minWidth}Px`
/** 为什么设置 100? 设置成便于计算, 计算rem时只需要将 设计稿的宽度 / 100 即可 */
export const fontSize = 100
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
2. 将定义的数据作为额外数据给 scss
import { designHeight, designMultiple, designWidth, fontSize, minWidth, minWindow } from './design.config'
export default ({ mode }) => {
css: {
preprocessorOptions: {
scss: {
additionalData: `
$vmDesignWidth: ${vmDesignWidth};
$vmDesignHeight: ${vmDesignHeight};
$minWindow: ${minWindow};
$vmFontsize: ${vmFontsize};
`
// sass 1.80+ 需要配置以下两项
api: 'modern-compiler',
// 忽略scss global-builtin, import 提示3.0将删除的警告
silenceDeprecations: ['global-builtin', 'import'],
}
}
},
//...
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
3. 在 js/ts/vue 页面直接import该配置文件
import { designWidth, minWidth } from '@/design.config'
const { width } = $(useWindowSize())
const singleHeight = computed(() => {
return Math.floor((32 * (width < minWidth ? minWidth : width)) / designWidth)
})
1
2
3
4
5
6
2
3
4
5
6
4. 在 scss 文件中使用
# global/global.scss
:root {
--design-width: #{$vmDesignWidth}px;
--design-height: #{$vmDesignHeight}px;
}
#app, #root, .global-wrap {
width: var(--design-width);
height: var(--design-height);
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
5. 注意
- 这种方法, 数据只能是常量, 不能是变量, 变更数据后需要重新打包
- 如果需要动态数据, 那就只能用 vue 的 v-bind
- sass 1.80 之后的版本使用需要注意: 使用了变量的 scss 文件, 必须要独立在 js/ts 或者 vue 文件中引入, 被其他scss文件import/use, 则会报错
# style.scss
@import 'global/global'; # 删除该行
@import 'global/uni';
@import 'global/ui';
@import './pages/index';
@import './pages/activity';
@import './pages/box';
@import './pages/user';
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<script setup lang="ts">
onLaunch(async () => {
const userStore = useUserStore()
const token = ls.get<string>('token') || ''
if (token) {
await userStore.getUserInfo()
}
})
</script>
<style lang="scss">
@import './assets/scss/global/global.scss'; # 添加该行
@import './assets/scss/style.scss';
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
有使用 vite 添加的全局变量的 scss 文件, 不能被其他 scss 文件引用, 需要在 vue 入口文件中 import, 只有被 vue/js 文件 import 的 scss 文件才会被追加全局变量
