当前位置: 首页 > news >正文

vue 配置sass、scss全局变量

下载vue项目

下载vue项目就不多说了,大家既然搜索这个标题,肯定不差这一步

依赖:

1.下载sass-resources-loader

执行npm/cnpm install sass-resources-loader --save-dev

修改配置

打开build文件夹,找到下面的utils文件,找到exports.cssLoaders里的下面这段,将scss配置改成如下形式


return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
}

把scss项替换成如下形式

scss: generateLoaders('sass').concat({
  loader:'sass-resources-loader',
  options:{
    resources:path.resolve(__dirname,'../src/assets/sass/common.scss')
  }
}),

这里我的common.scss放置了变量文件variable.scss和mixin.scss

// mixin.scss
@import './variable.scss';
@import './mixin.scss';

重新执行npm run dev 启动服务

在vue组件里写上一段试试吧,例如:

<style lang="scss">
#app {
    font-size: 14px;
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: $fontMainColor;
    height: 100%;
}
.triangle-top{
    display: inline-block;
    @include triangle(bottom, 10px, #ff0000)
}
.test{
    background: #ccc;
    @include box-shadow(0 0 5px rgba(0,0,0,.3));
}
</style>

相关文章:

  • LeetCode 28.实现strStr()(Python3)
  • CODING 缺陷管理功能正式开始公测
  • 官方解决所有 npm 全局安装权限问题
  • Dubbo底层采用Socket进行通信详解
  • 消息队列系列二(IOT中消息队列的应用)
  • js排序篇----快速排序,选择排序,冒泡排序,希尔排序
  • Service Worker
  • 《文献管理与信息分析》第五章 学习笔记
  • 一些集群操作以及问题查询
  • GraphQL学习过程应该是这样的
  • Spark -- WordCount程序
  • Java SE 12扩展Switch语句/表达式完整指南
  • java中具有继承关系的类及其对象初始化顺序
  • 和平之翼代码生成器SMEU版 4.0.0 Beta5 宝船公布
  • 去哪里学习行业知识?
  • [iOS]Core Data浅析一 -- 启用Core Data
  • [译] 怎样写一个基础的编译器
  • 【翻译】Mashape是如何管理15000个API和微服务的(三)
  • electron原来这么简单----打包你的react、VUE桌面应用程序
  • extract-text-webpack-plugin用法
  • JavaScript设计模式系列一:工厂模式
  • Material Design
  • MYSQL如何对数据进行自动化升级--以如果某数据表存在并且某字段不存在时则执行更新操作为例...
  • opencv python Meanshift 和 Camshift
  • 阿里云ubuntu14.04 Nginx反向代理Nodejs
  • 算法之不定期更新(一)(2018-04-12)
  • 腾讯大梁:DevOps最后一棒,有效构建海量运营的持续反馈能力
  • 跳前端坑前,先看看这个!!
  • 微信开源mars源码分析1—上层samples分析
  • 云栖大讲堂Java基础入门(三)- 阿里巴巴Java开发手册介绍
  • 在Unity中实现一个简单的消息管理器
  • 做一名精致的JavaScripter 01:JavaScript简介
  • Java数据解析之JSON
  • postgresql行列转换函数
  • 哈罗单车融资几十亿元,蚂蚁金服与春华资本加持 ...
  • ​​​​​​​​​​​​​​汽车网络信息安全分析方法论
  • ​一、什么是射频识别?二、射频识别系统组成及工作原理三、射频识别系统分类四、RFID与物联网​
  • ​直流电和交流电有什么区别为什么这个时候又要变成直流电呢?交流转换到直流(整流器)直流变交流(逆变器)​
  • #define,static,const,三种常量的区别
  • #pragma pack(1)
  • $(function(){})与(function($){....})(jQuery)的区别
  • (C#)if (this == null)?你在逗我,this 怎么可能为 null!用 IL 编译和反编译看穿一切
  • (二)c52学习之旅-简单了解单片机
  • (附源码)springboot码头作业管理系统 毕业设计 341654
  • (六)什么是Vite——热更新时vite、webpack做了什么
  • (免费领源码)Java#ssm#MySQL 创意商城03663-计算机毕业设计项目选题推荐
  • (七)微服务分布式云架构spring cloud - common-service 项目构建过程
  • (三分钟了解debug)SLAM研究方向-Debug总结
  • (转)iOS字体
  • .NET : 在VS2008中计算代码度量值
  • .net core控制台应用程序初识
  • .net Stream篇(六)
  • .NET平台开源项目速览(15)文档数据库RavenDB-介绍与初体验
  • @RestController注解的使用
  • [Angular] 笔记 9:list/detail 页面以及@Output