vue项目中设置全局引入scss,使每个组件都可以使用变量
在Vue项目中使用scss,如果写了一套完整的有变量的scss文件。那么就需要全局引入,这样在每个组件中使用。
可以在mian.js全局引入,下面是使用方法。
1: 安装node-sass、sass-loader、style-loader
npm install node-sass --save-dev
npm install sass-loader --save-dev
npm install style-loader --save-dev
2: 安装sass-resources-loader (如果不安装的话变量会报错)
npm install sass-resources-loader --save-dev
3: 修改build中的utils.js
scss: generateLoaders('sass'),
修改成:
scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/assets/main.scss') //这里写自己的文件路径
}
}
)
在main.js里面引入即可。 或者是不在main.js引入,单独在组件引入也可以。 在组件中的style标签添加lang="scss"。
vue项目中设置全局引入scss,使每个组件都可以使用变量的更多相关文章
- 在vue项目中设置BASE_URL
在vue项目中设置BASE_URL 1.在config文件夹中新建global.js文件 const BASE_URL = 'http://192.168.1.62:8080/rest/' expor ...
- 在vue项目中正确的引入jquery和bootstrap
<script>标签引入jquery在vue脚手架里并不适用,需要利用webpack引入jquery 一.第一种方法 1:因为已经安装了vue脚手架,所以需要在webpack中全局引入jq ...
- 在vue项目中通过iframe引入jquery项目
最近公司因为原来的jq框架存在的问题太多,所以要进行主题框架的重新搭建,我使用的vue进行的主题框架的重新搭建,但是原来的页面已经完成很多了,而且都是使用的jquery进行开发的 在vue中引入jqu ...
- Vue 项目中添加全局过滤器以及全局混合mixin
可以在.vue文件中定义局部使用的过滤器 export default{ data(){ return [] }, filters:{ toUpperCase:function(value){ ret ...
- 在vue项目中正确的引入jquery
最近学习vue,习惯性的通过<script>标签引入jquery,写完后报错才想起来,这种方式在vue是不适用的. 1:因为已经安装了vue脚手架,所以需要在webpack中全局引入jqu ...
- Vue项目中jQuery的引入
1.安装jQuery依赖 npm install jquery --save-dev 2.在webpack.base.conf.js头部加入如下代码 var webpack = require(&qu ...
- 在vue项目中添加全局提示框
1.写一个提示框组件:msg.vue (注明:这里用两个div的原因是成功和失败的提示不能用同一个div,因为他们可能紧接着出现,所以不能从始至终只有一个提示框在工作) 2.写一个调用此组建的js : ...
- 如何在vue项目中使用sass(scss)
1.用npm/cnpm/yarn安装sass的依赖包 npm install --save-dev sass-loader npm install --save-dev node-sass 或者: y ...
- Vue项目中设置每个单页面的标题
两种实现方法,第一种方法引入插件,第二种为编程方式实现(推荐) 首先在路由文件index.js中给每个单页面路由添加title routes: [{ path: '/', name: ...
随机推荐
- Anaconda安装及PyCharm环境配置
1. Anaconda下载 Anaconda 官方下载链接: https://www.continuum.io/downloads 根据自己的系统选择下载32位还是64位. 2. 进入下载目录 如果没 ...
- 后缀自动机 (WJMZBMR讲稿的整理和注释)
链接放在这里,有点难理解,至少我个人是的. 后缀自动机是一种有限状态自动机,其功能是识别字符串是否是母串的后缀.它能解决的问题当然不仅仅是判断是不是后缀这种事,跟字符串的连续子串有关的问题都可以往这个 ...
- SQL--left join ,inner join, right jion, Limit
SQL Limit 语句 用于返回规定的数量记录.当数据库中的数据量十分庞大时,可以使用,返回指定的数量记录. 语句如:select * from grade limit 5.返回grade表中的前面 ...
- 解决JSP页面中文乱码插入到数据库的问题
在JSP页面使用表单注册一个用户名的时候,查看到数据库里面的表中文显示乱码的情况有两种: 1.JSP页面传进来的参数中文就是乱码,则是前台的问题,这个时候写一个过滤器就好了,可以写如下的一个过滤器 p ...
- C/C++中的函数指针
C/C++中的函数指针 一.引子 今天无聊刷了leetcode上的一道题,如下: Median is the middle value in an ordered integer list. If t ...
- 02《UML大战需求分析》阅读笔记之二
UML虽然是一种新的工具,但同时也代表了一种新的先进的思考方法,所以学习UML的关键不在于学习语法,而是要改变思维习惯.所以我觉得我还需要系统地培养几方面的能力,如书面表达能力,归纳总结能力,“面向对 ...
- JavaScript中的线程与进程
定义: 线程分为:单线程和多线程 单线程:一个正在运行的程序(即进行)至少有一个线程,这个线程叫做主线程,只有一个主线程的程序叫做单线程程序,主线程负责执行所有代码的执行(UI展现及刷新.网络请求.本 ...
- 郑晔谈 Moco 框架的开发:写一个好的内部 DSL ,写一个表达性好的程序
作者:张龙 出处:http://www.infoq.com/cn/news/2013/07/zhengye-on-moco 郑晔谈Moco框架的开发:写一个好的内部DSL,写一个表达性好的程序 作者 ...
- s5k4ba摄像头驱动分析
注释: 本驱动是基于S5PV310的,但是全天下的摄像头驱动都是采用V4L2,因此驱动框架流程基本差不多.其中fimc_init_camera()函数会回调.init函数,该函数主要就是通过IIC总线 ...
- 使用InstelliJ IDEA创建Spring MVC应用程序
环境版本 Windows 8.1 IDE:InstelliJ IDEA 13 Spring:Spring 4.1.1 & Spring MVC 4.1.1 WebLogic 10. ...