sass之mixin的全局引入(vue3.0)

1.scss文件(mixin.scss)

/* 渐变 */
@mixin gradual($color, $color1){
background: $color; /* Old browsers */
background: -moz-linear-gradient(top, $color %, $color1 %); /* FF3.6-15 */
background: -webkit-linear-gradient(top, $color %,$color1 %); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, $color %,$color1 %); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=$color, endColorstr=$color1,GradientType= ); /* IE6-9 */
}

2.配置loader

//vue.config.js

module.exports = {
//配置全局样式变量
css: {
loaderOptions: {
sass: {
data: `@import "@/assets/style/common/mixin.scss";`
}
}
}
}

3.使用

<style lang='scss' scoped>
.header {
@include gradual(#29b474, #038f27);
}
</style>

在css中直接使用@include调用mixin即可。

钻研不易,转载请注明出处......

sass之mixin的全局引入(vue3.0)的更多相关文章

  1. vue3系列:vue3.0自定义全局弹层V3Layer|vue3.x pc桌面端弹窗组件

    基于Vue3.0开发PC桌面端自定义对话框组件V3Layer. 前两天有分享一个vue3.0移动端弹出层组件,今天分享的是最新开发的vue3.0版pc端弹窗组件. V3Layer 一款使用vue3.0 ...

  2. VUE3.0升级与配置(跨域、全局scss变量等)

    1.检查本机vue版本 vue -V 2.升级vue3.0命令 npm install -g @vue/cli 3.创建完项目后,在项目根目录新增vue.config.js文件,插入代码(简洁) mo ...

  3. Vue3.0中引入地图(谷歌+高德+腾讯+百度)

    1 概述 项目需求需要引入地图,对于目前最新的Vue3.0,无论是百度/高德/腾讯地图目前还没有适配,只有Vue 2.x版本的: 目前只有谷歌地图的Vue3.0适配: 但是没有适配并不代表不能使用,本 ...

  4. Vue3.0新特性

    Vue3.0新特性 Vue3.0的设计目标可以概括为体积更小.速度更快.加强TypeScript支持.加强API设计一致性.提高自身可维护性.开放更多底层功能. 描述 从Vue2到Vue3在一些比较重 ...

  5. vue3.0使用ant-design-vue进行按需加载原来这么简单

    下载 ui库 yarn add ant-design-vue 默认是全局引入,打包后体积很大, 非常影响首屏加载速度, 按需加载 下载按需加载的插件;推荐使用cnpm cnpm install bab ...

  6. 纯小白入手 vue3.0 CLI - 2.6 - 组件的复用

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...

  7. Vue3.0脚手架搭建

    https://www.jianshu.com/p/fbcad30031c2 vue3.0官网:https://cli.vuejs.org/zh/guide/ 介绍: notice: 这份文档是对应 ...

  8. 通过10个实例小练习,快速熟练 Vue3.0 核心新特性

    Vue3.0 发 beta 版都有一段时间了,正式版也不远了,所以真的要学习一下 Vue3.0 的语法了. GitHub 博客地址: https://github.com/biaochenxuying ...

  9. Vue3实战系列:Vue3.0 + Vant3.0 搭建种子项目

    最近在用 Vue3 写一个开源的商城项目,开源后让大家也可以用现成的 Vue3 大型商城项目源码来练练手,目前处于开发阶段,过程中用到了 Vant3.0,于是就整理了这篇文章来讲一下如何使用 Vue3 ...

随机推荐

  1. Nginx作为静态资源web服务-跨站访问

    一.跨域访问 1.什么是跨域? 参看我的另一篇博客(https://www.cnblogs.com/chrdai/p/11280895.html) 2.为什么浏览器禁止跨域访问? 不安全,容易出现CS ...

  2. 如何解决Sublime text中文乱码问题

    Sublime Text 2是一个非常不错的源代码及文本编辑器,但是不支持GB2312和GBK编码在很多情况下会非常麻烦.不过Sublime Package Control所以供的插件可以让Subli ...

  3. VC 实现程序只运行一个实例,并激活已运行的程序

    转载:http://blog.sina.com.cn/s/blog_4b44e1c00100bh69.html 进程的互斥运行:CreateMutex函数实现只运行一个程序实例 正常情况下,一个进程的 ...

  4. hk clearing participant & Exchange Participant of SEHK

    https://www.hkex.com.hk/-/media/HKEX-Market/Services/Clearing/Securities/Infrastructure/CCASS-3-Term ...

  5. RabbitMQ学习之:(八)Topic Exchange (转贴+我的评论)

    From: http://lostechies.com/derekgreer/2012/05/18/rabbitmq-for-windows-topic-exchanges/ RabbitMQ for ...

  6. java的JDBC驱动使用链接数据库

    1.    import java.sql.*; 2 .    导入所需要的数据库的jar包,如oracle/informix的 3. String sql = "select * from ...

  7. Linux日常用的命令

    查看一个文件夹是的挂载路径,比如查看opt文件夹挂载在哪:df /opt root@iZ2zedo02x7n4nuc3lb4ueZ:~# df /opt Filesystem 1K-blocks Us ...

  8. React Native使用react-navigation时,设置navigationOptions中Static中使用this注意点

    使用react-navigation时,单页面设置navigationOptions中,进行Static中调用方法,不能像以下设置 onPress = {()=>this.clickFinish ...

  9. docker search 报错

    docker 出现 Error response from daemon vim /etc/containers/registries.conf [registries.search]registri ...

  10. ASP.NET Core 入门笔记9,ASP.NET Core + Entity Framework Core 数据访问入门

    一.前言 1.本教程主要内容 ASP.NET Core MVC 集成 EF Core 介绍&操作步骤 ASP.NET Core MVC 使用 EF Core + Linq to Entity ...