在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,使每个组件都可以使用变量的更多相关文章

  1. 在vue项目中设置BASE_URL

    在vue项目中设置BASE_URL 1.在config文件夹中新建global.js文件 const BASE_URL = 'http://192.168.1.62:8080/rest/' expor ...

  2. 在vue项目中正确的引入jquery和bootstrap

    <script>标签引入jquery在vue脚手架里并不适用,需要利用webpack引入jquery 一.第一种方法 1:因为已经安装了vue脚手架,所以需要在webpack中全局引入jq ...

  3. 在vue项目中通过iframe引入jquery项目

    最近公司因为原来的jq框架存在的问题太多,所以要进行主题框架的重新搭建,我使用的vue进行的主题框架的重新搭建,但是原来的页面已经完成很多了,而且都是使用的jquery进行开发的 在vue中引入jqu ...

  4. Vue 项目中添加全局过滤器以及全局混合mixin

    可以在.vue文件中定义局部使用的过滤器 export default{ data(){ return [] }, filters:{ toUpperCase:function(value){ ret ...

  5. 在vue项目中正确的引入jquery

    最近学习vue,习惯性的通过<script>标签引入jquery,写完后报错才想起来,这种方式在vue是不适用的. 1:因为已经安装了vue脚手架,所以需要在webpack中全局引入jqu ...

  6. Vue项目中jQuery的引入

    1.安装jQuery依赖 npm install jquery --save-dev 2.在webpack.base.conf.js头部加入如下代码 var webpack = require(&qu ...

  7. 在vue项目中添加全局提示框

    1.写一个提示框组件:msg.vue (注明:这里用两个div的原因是成功和失败的提示不能用同一个div,因为他们可能紧接着出现,所以不能从始至终只有一个提示框在工作) 2.写一个调用此组建的js : ...

  8. 如何在vue项目中使用sass(scss)

    1.用npm/cnpm/yarn安装sass的依赖包 npm install --save-dev sass-loader npm install --save-dev node-sass 或者: y ...

  9. Vue项目中设置每个单页面的标题

    两种实现方法,第一种方法引入插件,第二种为编程方式实现(推荐) 首先在路由文件index.js中给每个单页面路由添加title routes: [{     path: '/',     name: ...

随机推荐

  1. http协议以及防盗链技术

    http协议,又称为超文本传输协议,顾名思义,http协议不仅能传输文本,还能传输图片,视频,压缩包等文件,http协议是建立在tcp/ip协议的基础之上的,http协议对php程序员来讲可以说是重中 ...

  2. Android DrawerLayout设置左右侧滑菜单为全屏

    我们可以在MainActivity中获取屏幕宽度后动态赋值给侧滑菜单. 在oncreate时 DisplayMetrics metric = new DisplayMetrics(); getWind ...

  3. onTouchEvent事件

    @Override public boolean onTouchEvent(MotionEvent event) { if(event.getAction() == MotionEvent.ACTIO ...

  4. 面向对象和结构化程序设计的区别X

    面向对象和结构化程序设计的区别 结构化程序的概念首先是从以往编程过程中无限制地使用转移语句而提出的.转移语句可以使程序的控制流程强制性的转向程序的任一处,在传统流程图中,就是用上节我们提到的" ...

  5. rem 自适应布局 bootstrap 移动端适配

    移动端适配用:rem 自使用布局用:bootstrap

  6. Jquery 过滤器(first,last,not,even,odd)的使用和区别

    Jquery 过滤器主要有first,last,not,even,odd等等,它们分别表示: 代码如下: $(function(){ $("#menu li:first").cli ...

  7. 通过页面预加载(preload)提升小程序的响应速度

    GitHub: https://github.com/WozHuang/mp-extend 主要目标 如果小程序在打开新页面时需要通过网络请求从接口中获取所用的数据,在请求完成之前页面都会因为没有数据 ...

  8. 有效解决ajax传中文时,乱码的情况,php处理接收到的值

    在抽奖环节时,需把获奖名单通过ajax的post方式传输给php后台进行储存,但是php接收到的值确是乱码.在百度之后并没有找到合适的解决方法. 则使用js的encodeURI函数可以有效解决,但不知 ...

  9. luogu 自适应Simpson1

    自适应simpson1 题意 求一个定积分 (可以手推公式,但是我不想推怎么办) 解法 用一个又一个的二次函数覆盖原函数,则可以近似的得到原函数的积分.(这就是Simpson) 模板在下面: #inc ...

  10. [luogu3369] 普通平衡树(splay模板)

    题目描述 您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下操作: 1.插入 xx 数 2.删除 xx 数(若有多个相同的数,因只删除一个) 3.查询 xx 数的排名(排名定义为比 ...