vue使用@include或@mixin报错的问题及解决
更新时间：2024年02月08日 16:12:10 作者：草率了小伙
这篇文章主要介绍了vue使用@include或@mixin报错的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue使用@include或@mixin报错解决
vue样式使用
div{
@include transition();
&:hover{
@include translateY(-10px)
}
}报错解决方法
1.项目根目录下新建一个vue.config.js文件
里面写入
module.exports = {
css: {
loaderOptions: {
sass: {
data: `@import "@/assets/common.scss";`
}
}
}
}2."sass-loader"版本必须在8.0版本以下，不包含8.0，最好用7.1.0版本
@mixin与@include介绍
在Sass里面，我们经常会见到@mixin与@include。
其中：
- @mixin允许定义一个可以在整个样式表中重复使用的样式
- @include就是将我们定义的mixin引入到文档中
定义一个mixin
@mixin my-text {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
}
使用mixin
使用上面定义的那个mixin， selector是当前的选择器
selector {
@include my-text;
}
传递变量
/* 混入接收两个参数 */
@mixin bordered($color, $width) {
border: $width solid $color;
}
.myArticle {
@include bordered(blue, 1px); // 调用混入，并传递两个参数
}
.myNotes {
@include bordered(red, 2px); // 调用混入，并传递两个参数
}
如何引入mixin
上面的讲解都是如何定义以及使用mixin。
一般常见的方式是，要创建一个mixin.sass文件，在其中写上定义的mixin。
但是对于我们需要在其他的vue的style标签中去使用这个mixin时，怎么去引入的呢？ 难道是用import mixin.sass吗？
其实我们需要在vue.config.js 中引入即可。
css: {
loaderOptions: {
sass: {
// 全局引入变量和 mixin
additionalData: `
@import "@/assets/scss/variable.scss";
@import "@/assets/scss/mixin.scss";
`
}
}
},
只针对sass-loader去进行引入：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue中关闭弹窗组件时销毁并隐藏操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
在vue项目中,有些我们会遇到修改完数据,但是视图却没有更新的情况,具体的场景不一样,解决问题的方法也不一样,在网上看了很多文章,在此总结汇总一下,需要的朋友可以参考下2023-08-08
Ajax是一种在不重新加载整个页面的情况下,通过 JavaScript 与服务器进行异步通信的技术,这篇文章主要介绍了vue项目中常用的2 个 Ajax库,需要的朋友可以参考下2025-06-06
这篇文章主要给大家介绍了关于vue中data的代理和监听的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了vue、react等单页面项目应该这样子部署到服务器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-01-01
这篇文章主要为大家详细介绍了vue中自定义右键菜单插件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了详解Vue学习笔记入门篇之组件的内容分发(slot)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要为大家介绍了Vue 2中实现CustomRef方式防抖节流示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要介绍了前端vue打包项目，如何解决跨域问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要为大家介绍了详解如何使用vue和electron开发一个桌面应用，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
最新评论