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大文件分片上传之simple-uploader.js的使用
本文主要介绍了vue大文件分片上传之simple-uploader.js的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05
vue使用echarts实现立体柱形图
这篇文章主要为大家详细介绍了vue使用echarts实现立体柱形图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
记一次vue去除#问题处理经过小结
这篇文章主要介绍了vue去除#问题处理经过，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01
Vue中 key keep-alive的实现原理
这篇文章主要介绍了Vue中 key keep-alive的实现原理,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
element-plus报错ResizeObserver loop limit exceeded解决办法
这篇文章主要给大家介绍了关于element-plus报错ResizeObserver loop limit exceeded的解决办法,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-07-07
解决vue中监听input只能输入数字及英文或者其他情况的问题
今天小编就为大家分享一篇解决vue中监听input只能输入数字及英文或者其他情况的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
前段时间看抖音，有人用时间轮盘作为动态的桌面壁纸，一时间成为全网最火的电脑屏保，后来小米等运用市场也出现了【时间轮盘】，有点像五行八卦，感觉很好玩，于是突发奇想，自己写一个网页版小DEMO玩玩,需要的朋友可以参考下
2019-04-04
vant van-list下拉加载更多onload事件问题
这篇文章主要介绍了vant van-list下拉加载更多onload事件问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
vue开发环境配置跨域的方法步骤
本文介绍了使用vue-cli搭建的项目在开发时配置跨域，上线后不做任何任何修改，接口也可以访问，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01
结合康熙选秀讲解vue虚拟列表实现
这篇文章主要为大家介绍了结合康熙选秀讲解vue虚拟列表的原理使用，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07