1、使用场景
variable.scss文件样例
// 颜色定义规范
$color-background: #222;
mixin.scss文件样例
// 背景图片
@mixin bg-image($url) {
background-image: url($url + "@2x.png");
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
background-image: url($url + "@3x.png");
}
}
在.vue文件中使用
<style lang="scss" scoped>
// 此处省略了使用import相关ccss文件
.header {
height: 44px;
text-align: center;
color: $color-background;
@include bg-image('logo');
}
</style>
2、在VUE项目根目录下创建vue.config.js，并在其中加入如下配置
下面的配置有版本要求，需要最新版本，才支持下面的配置，目前使用的是
"node-sass": "^5.0.0",
"sass-loader": "^10.1.0",
module.exports = {
css: {
loaderOptions: {
sass: {
// 全局引入变量和 mixin
additionalData: `
@import "@/assets/scss/variable.scss";
@import "@/assets/scss/mixin.scss";
`
}
}
}
该篇为转载自用，转载于https://blog.csdn.net/wenhui6/article/details/115616544