一、編寫全局scss變量
/src/common/global.csss
$c-bg: #FF3259;
$c-text-w: #ffffff;
$c-text-E: #ECECEC;
$c-content-w: 1205PX;
$c-content-m: 375px;
二、vue.config.js引入全局scss
vue.config.js
module.exports = {
publicPath: './', // 預設'/',部署應用包時的基本 URL
productionSourceMap: false,
css: {
loaderOptions: {
sass: {
data: `
@import "@/common/global.scss";
`
}
}
}
}
三、css中使用
/src/view/home.vue
<template>
<div class="about">
<div class="demo"></div>
</div>
</template>
<style scoped lang=scss>
.demo {
width: $c-content-m;
height: $c-content-m;
background: $c-bg;
}
</style>
最後推薦一個 js常用的utils合集,幫我點個star吧~
- github
- 文檔