"sass": "^1.26.5",
"sass-loader": "^8.0.2",
utils.scss
@use "sass:math"; //math函数,https://sass-lang.com/documentation/breaking-changes/slash-div
$bodyBg:#cdcdcd;
$slideBarWidth:280px;
$titleColor:blue;
$designWidth:5200;
$designHeight:1976;
//这里宽高参考PSD设计稿 ;我这里宽为1920px,高为1080px为例,所以这里 计算vw时除以1920,计算vh时除以1080;以便在使用时,不用去计算倍数, PSD设计稿中的尺寸是多少,我们样式就是多少!!!
/*
案例:一个class为title的div,宽100px, 高300px
.title {
width: vw(100);
height: vh(300);
}
200/3840
200/1920
*/
@function vw($px) {
@return math.div($px , $designWidth) * 100vw;
// @return $px * 1px;
}
@function vh($px) {
@return math.div($px , $designHeight) * 100vh;
//@return $px * 1px;
}
@function px2font($px) {
@return math.div($px , $designWidth) * 100vw;
// @return $px * 1px;
}
//滚动条样式
@mixin scrollBarStyle() {
&::-webkit-scrollbar {
width: 4px;
height: 4px;
}
&::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px #9b9ba3;
background: rgba(152, 155, 163, 0.2);
}
}
@mixin placeholder {
&::-webkit-input-placeholder {
@content
}
}
// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
//https://blog.csdn.net/ww_5211314/article/details/109614511
:export {
bodyBg:$bodyBg;
slideBarWidth:$slideBarWidth;
titleColor:$titleColor;
}
vue.config.js全局配置
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
const port = process.env.port || process.env.npm_config_port || 8081 // dev port
module.exports={
publicPath: '', //dev ./ prod /
outputDir: 'dist',
assetsDir: 'static',
lintOnSave: false,//process.env.NODE_ENV === 'development',
productionSourceMap: false,
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
proxy: {
'/api': { //这里最好有一个 /
target: '58.210.9.131:8280', // 后台接口域名
ws: true, //如果要代理 websockets,配置这个参数
secure: false, // 如果是https接口,需要配置这个参数
changeOrigin: true, //是否跨域
pathRewrite:{
'^/api':''
}
}
},
},
configureWebpack: {
// provide the app's title in webpack's name field, so that
// it can be accessed in index.html to inject the correct title.
name: "数字孪生平台",
resolve: {
alias: {
'@': resolve('src')
}
}
},
css:{
//全局配置utils.scss
loaderOptions:{
sass:{
prependData:`@import "@/styles/utils.scss";`
}
}
}
}
使用
.menu {
width: vw(160);
height: vh(64);
background-image: url("images/box_normat.png");
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
display: flex;
align-items: center;
justify-content: space-evenly;
cursor: pointer;
.icon {
width: vw(40);
height: vh(32);
}
.name {
font-size: vh(32);
color: #fff;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.3);
font-weight: 500;
}
&.roma{
left: vw(479);
}
&.time {
left: vw(712);
top: vh(-18);
}
&.weather {
left: vw(940);
top: vh(-18);
}
&.season {
left: vw(1168);
}
&.active {
background-image: url("images/box_selected.png");
}
}
大屏自适应px转vw vh等
最新推荐文章于 2024-09-09 19:16:49 发布
本文介绍了如何在Sass中使用math函数进行单位转换,如vw和vh,以及如何通过Webpack的`:export`指令共享变量。同时,展示了Vue.js的配置文件中如何引入全局样式utils.scss并管理样式组件的全局样式和响应式设计。
摘要由CSDN通过智能技术生成