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全局变量的更多相关文章

  1. Vue中使用Sass全局变量

    前言 假设我们原有项目的主题色是蓝色的,这时有个需求,需要把主题色改成橙色的.一般情况下,我们可能会在main.js中引入公共样式文件,但你会发现,在组件中使用公共样式文件中定义的某个参数时,会报一个 ...

  2. 在vue项目中 如何定义全局变量 全局函数

    如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数 定义全局变量 原理: 设置一个专用的的 ...

  3. 如何设置 sass 全局变量,js如何使用 sass 变量

    关键词:sass全局变量 js引用sass变量 1 如何在样式中使用 scss 的声明的全局变量 假设我们有一个全局的 scss 变量文件/styles/_vars.sass,如下: $red: re ...

  4. vue.js引用出错-script代码块放在head和body中的区别

    这篇随笔是为了记录vue.js引用出错的原因,看到最后原来是vue.js代码放在head中不能正常使用,要最后发现要将其放在body中才行... 原来是js代码放在head和body中的区别问题,占个 ...

  5. Vue脚手架开发使用sass

    vue默认采用的是原生的css,如果想要使用css预编译工具,比如sass,需要下载对应的scss的loader, 具体是 npm install --save-dev sass-loader npm ...

  6. (vue.js)vue中引用了别的组件 ,如何使this指向Vue对象

    Vue中引用了别的组件 ,如何使this指向Vue对象 今天学习Vue组件传值, 通过创建Vue实例, 广播和监听实现传值, 但是传值之后无法直接将得到的值应用到Vue对象, 因为这相当于引用改了别的 ...

  7. vue项目中引入Sass

    Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g, ...

  8. vue、rollup、sass、requirejs组成的vueManager

    近段时间本人一直在思考如何基于vue搭建一个中后端管理系统的通用基础前端解决方案.思考的主要问题点如下: 如何使各个子业务模块的按需加载 css预处理方案的选择 如何引入现代的前端工程思想,也就是工程 ...

  9. 使用Vue.prototype在vue中注册和使用全局变量

    在main.js中添加一个变量到Vue.prototype Vue.prototype.$appName = 'My App' 这样 $appName 就在所有的 Vue 实例中可用了,甚至在实例被创 ...

随机推荐

  1. 高可靠性——TSN 802.1Qci协议介绍

    TSN协议族根据实现功能可以分为:定时与同步.延时.可靠性和资源管理四个类别,往期的时间同步--TSN协议802.1AS介绍一文向大家介绍了定时与同步功能的核心--802.1AS协议,而在基于TSN工 ...

  2. Android: Client-Server communication

    Refer to: http://osamashabrez.com/simple-client-server-communication-in-android/ I was working of an ...

  3. Python pyecharts绘制饼图

    一.pyecharts绘制饼图语法简介 饼图主要用于表现不同类目的数据在总和中的占比.每个的弧度不是数据量的占比pie.add()方法的用法add(name, attr, value, radius= ...

  4. [BUUCTF]PWN——ciscn_2019_s_4

    ciscn_2019_s_4 附件 步骤: 例行检查,32位程序,开启了nx保护 本地试运行一下,看看大概的情况,两次输入,让人联想到栈迁移 32位ida载入,找到关键函数,只可以溢出8字节,没法构造 ...

  5. 升级过log4j,却还没搞懂log4j漏洞的本质?

    摘要:log4j远程代码漏洞问题被大范围曝光后已经有一段时间了,今天完整讲清JNDI和RMI以及该漏洞的深层原因. 本文分享自华为云社区<升级过log4j,却还没搞懂log4j漏洞的本质?为你完 ...

  6. java 图形化工具Swing 基本使用

    Swing介绍: 使用Swing开发图形界面比AWT更加优秀,因为Swing是一种轻量级组件,它采用100% Java实现,不再依赖于本地平台的图形界面,所以可以在所有平台上保持相同的运行效果,对跨平 ...

  7. mongodb 64位操作系统下载地址

    下载地址:https://www.mongodb.org/dl/win32/x86_64

  8. PowerDotNet平台化软件架构设计与实现系列(09):消息平台

    消息队列已经几乎成为大中型高吞吐应用的标配,继续根据我们一贯的节约代码的风格,为了复用的目标,抽象出消息队列平台,进行消息队列管理. 环境准备 1.(必须).Net Framework4.5+ 2.( ...

  9. SpringBoot使用@Async实现异步调用

    1.@EnableAsync 首先,我们需要在启动类上添加  @EnableAsync 注解来声明开启异步方法. @SpringBootApplication @EnableAsync public ...

  10. Protobuf 动态加载 .proto 文件并操作 Message

    Google Protocol Buffer 的常规用法需要使用 protoc 将 .proto 编译成 .pb.h 和 .pb.cc,这样做效率非常高,但是耦合性也很高.在某些追求通用性而不追求性能 ...