vue实现引用less,sass全局变量
1、npm install sass-resources-loader --save-dev;
2、build/utils.js中,修改
function resolveResource(name) {
return path.resolve(__dirname, '../src/assets/css/' + name);
}
function generateSassResourceLoader() {
var loaders = [
cssLoader,
// 'postcss-loader',
'less-loader',
{
loader: 'sass-resources-loader',
options: {
// it need a absolute path
resources: [resolveResource('basic.less')]
}
}
];
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
其中resolveResource中的‘../src/assets/css’换成自己的less/sass文件的路径,generateSassResourceLoader中
resources:[resolveResource('basic.less')]的basic.less换成自己的less/sass文件名;(注意:如果是sass,则
var loaders = [
cssLoader,
// 'postcss-loader',
'less-loader',
{
loader: 'sass-resources-loader',
options: {
// it need a absolute path
resources: [resolveResource('basic.less')]
}
}
];
中的‘less-loader’需要改为 'sass-loader');
3、build/utils.js中,把
less: generateLoaders('less') 替换成 less: generateSassResourceLoaer()
参考: https://blog.csdn.net/u014292161/article/details/79193381
vue实现引用less,sass全局变量的更多相关文章
- Vue中使用Sass全局变量
前言 假设我们原有项目的主题色是蓝色的,这时有个需求,需要把主题色改成橙色的.一般情况下,我们可能会在main.js中引入公共样式文件,但你会发现,在组件中使用公共样式文件中定义的某个参数时,会报一个 ...
- 在vue项目中 如何定义全局变量 全局函数
如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数 定义全局变量 原理: 设置一个专用的的 ...
- 如何设置 sass 全局变量,js如何使用 sass 变量
关键词:sass全局变量 js引用sass变量 1 如何在样式中使用 scss 的声明的全局变量 假设我们有一个全局的 scss 变量文件/styles/_vars.sass,如下: $red: re ...
- vue.js引用出错-script代码块放在head和body中的区别
这篇随笔是为了记录vue.js引用出错的原因,看到最后原来是vue.js代码放在head中不能正常使用,要最后发现要将其放在body中才行... 原来是js代码放在head和body中的区别问题,占个 ...
- Vue脚手架开发使用sass
vue默认采用的是原生的css,如果想要使用css预编译工具,比如sass,需要下载对应的scss的loader, 具体是 npm install --save-dev sass-loader npm ...
- (vue.js)vue中引用了别的组件 ,如何使this指向Vue对象
Vue中引用了别的组件 ,如何使this指向Vue对象 今天学习Vue组件传值, 通过创建Vue实例, 广播和监听实现传值, 但是传值之后无法直接将得到的值应用到Vue对象, 因为这相当于引用改了别的 ...
- vue项目中引入Sass
Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g, ...
- vue、rollup、sass、requirejs组成的vueManager
近段时间本人一直在思考如何基于vue搭建一个中后端管理系统的通用基础前端解决方案.思考的主要问题点如下: 如何使各个子业务模块的按需加载 css预处理方案的选择 如何引入现代的前端工程思想,也就是工程 ...
- 使用Vue.prototype在vue中注册和使用全局变量
在main.js中添加一个变量到Vue.prototype Vue.prototype.$appName = 'My App' 这样 $appName 就在所有的 Vue 实例中可用了,甚至在实例被创 ...
随机推荐
- JavaScript对象之面向对象
在js中创建对象的两种方式 1.new一个Objecteg: var flower = new Object(); flower.stuname = "呵呵"; flower.ag ...
- shell脚本 检查mysql节点数据一致性
一.简介 源码地址 日期:2018/4/12 介绍:参考pt checksum思想改写,可以定制化的检查随意两个mysql节点的数据一致性. 功能: 检查随意两个几点的数据一致性 支持并发检查,基于库 ...
- Mysql脚本 优化检测
下载地址: wget https://launchpad.net/mysql-tuning-primer/trunk/1.6-r1/+download/tuning-primer.sh 安装依赖: y ...
- MySQL数据库行转列
一.数据源如下所示 二.对应SQL语句如下所示 -- 行转列 SELECT t1.`产品名称`, SUM(CASE t1.`日期` WHEN '2019-11-11' THEN t1.`数量` ELS ...
- 优化器统计跟踪(SYS.EXP_HEAD$ SYS.EXP_OBJ$ SYS.EXP_STAT$不)导致表空间 SYSAUX不断增长
资料来自support文档 ID 2354960.1 环境: aws rds 19c(亚马逊云oracle 数据库) 背景: 在一次查看数据库表段的占用空间大小的时候,无意间发现其中EXP_开头的表占 ...
- BUUCFT pwn asis2016_b00ks
看师傅们wp的时候,我才知道这个道题是wiki上面的例题.我看了一些师傅的wp,发现大家都是一种做法,都是通过mmap堆地址,来找libc基地址的.而我试了一下fastbisn attack,发现也可 ...
- exit_hook在pwn题中的应用
以前只接触过malloc_hook,free_hook,大概意思就是在调用malloc和free的时候会先看看里面有没有东西,有的话就会执行.以前在看一些师傅们博客的时候有看到过exit_hook,前 ...
- bjdctf_2020_babyrop2
这道题是一道基本题,正因为它经典,所以需要重点记录一下. 这道题考察格式化字符串泄露canary,然后rop获得libc版本,之后拿到shell.拿到程序之后我们先检查一下保护... 开启了堆栈不可执 ...
- 「Python实用秘技03」导出项目的极简环境依赖
本文完整示例代码及文件已上传至我的Github仓库https://github.com/CNFeffery/PythonPracticalSkills 这是我的系列文章「Python实用秘技」的第3期 ...
- CF108A Palindromic Times 题解
Content 现在是 \(h\) 时 \(m\) 分,请求出在此之后(不包含此时)的第一个回文时间. 数据范围:\(0\leqslant h\leqslant 23,0\leqslant m\leq ...