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: ...
随机推荐
- Windows下Word.exe在哪?
在这里: C:\Program Files\Microsoft Office\root\Office16
- luogu 1593 因子和
因子和 题目描述 输入两个正整数a和b,求\(a^b\)的因子和.结果太大,只要输出它对9901的余数. 解法 基本算数定理,每一个数都可以被分解成一系列的素数的乘积,然后你可以分解出因数了. 如何求 ...
- 关于QueryRunner数据查询以及常用方法
QueryRunner数据查询操作调用QueryRunner类方法query(Connection con,String sql,ResultSetHandler r, Object.params)R ...
- 使用http-server开启一个本地服务器
前言 在写前端页面中,经常会在浏览器运行HTML页面,从本地文件夹中直接打开的一般都是file协议,当代码中存在http或https的链接时,HTML页面就无法正常打开,为了解决这种情况,需要在在本地 ...
- const,var,let 区别
js中const,var,let区别 1.const定义的变量不可以修改,而且必须初始化. 声明的是常量 1 const b = 2;//正确 2 // const b;//错误,必须初始化 3 co ...
- Js基础知识(作用域、特殊函数---自调、回调、作为值的函数)
15.作用域 概念: 规定变量或函数的可被访问的范围和生命周期 分类: 全局作用域 -就是指当前整个页面环境: 局部作用域(函数作用域) -就是指某个函数内部环境 l 变量的作用域 全局变量 - 定义 ...
- 如何在ZBrush 4R7中设置背面遮罩
ZBrush 4R7中的背面遮罩是如何来设置的?当我们在进行ZBrush雕刻创作的时候,经常会不经意的雕刻到背面的物体,那么,如何防止背面的物体不被雕刻到,这就需要设置下背景遮罩了. ZBrush 4 ...
- mybatis中if及concat函数的使用
- 在Windows环境下使用短信猫收发短信的简单配置:
Windows简单配置: 1.插入usb接口,打开电脑的设备管理器,装驱动后,查看端口下设备的com(串口)是多少,接下来就是配置短信猫的必须参数: 如果短信猫是COM(串口)口的,一般端口是COM1 ...
- Airtest ——poco
1. Pymysql(No module named ‘cryptography’) pip install cryptography pip install paramiko 把 cryptogr ...