在Vue项目中使用scss,如果写了一套完整的有变量的scss文件。那么就需要全局引入,这样在每个组件中使用。

可以在mian.js全局引入,下面是使用方法。

1: 安装node-sass、sass-loader、style-loader

  1. npm install node-sass --save-dev
  2. npm install sass-loader --save-dev
  3. npm install style-loader --save-dev

2: 安装sass-resources-loader  (如果不安装的话变量会报错)

  1. npm install sass-resources-loader --save-dev

3: 修改build中的utils.js

  1. scss: generateLoaders('sass'),
  2. 修改成:
  3. scss: generateLoaders('sass').concat(
  4. {
  5. loader: 'sass-resources-loader',
  6. options: {
  7. resources: path.resolve(__dirname, '../src/assets/main.scss') //这里写自己的文件路径
  8. }
  9. }
  10. )

在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. Anaconda安装及PyCharm环境配置

    1. Anaconda下载 Anaconda 官方下载链接: https://www.continuum.io/downloads 根据自己的系统选择下载32位还是64位. 2. 进入下载目录 如果没 ...

  2. 后缀自动机 (WJMZBMR讲稿的整理和注释)

    链接放在这里,有点难理解,至少我个人是的. 后缀自动机是一种有限状态自动机,其功能是识别字符串是否是母串的后缀.它能解决的问题当然不仅仅是判断是不是后缀这种事,跟字符串的连续子串有关的问题都可以往这个 ...

  3. SQL--left join ,inner join, right jion, Limit

    SQL Limit 语句 用于返回规定的数量记录.当数据库中的数据量十分庞大时,可以使用,返回指定的数量记录. 语句如:select * from grade limit 5.返回grade表中的前面 ...

  4. 解决JSP页面中文乱码插入到数据库的问题

    在JSP页面使用表单注册一个用户名的时候,查看到数据库里面的表中文显示乱码的情况有两种: 1.JSP页面传进来的参数中文就是乱码,则是前台的问题,这个时候写一个过滤器就好了,可以写如下的一个过滤器 p ...

  5. C/C++中的函数指针

    C/C++中的函数指针 一.引子 今天无聊刷了leetcode上的一道题,如下: Median is the middle value in an ordered integer list. If t ...

  6. 02《UML大战需求分析》阅读笔记之二

    UML虽然是一种新的工具,但同时也代表了一种新的先进的思考方法,所以学习UML的关键不在于学习语法,而是要改变思维习惯.所以我觉得我还需要系统地培养几方面的能力,如书面表达能力,归纳总结能力,“面向对 ...

  7. JavaScript中的线程与进程

    定义: 线程分为:单线程和多线程 单线程:一个正在运行的程序(即进行)至少有一个线程,这个线程叫做主线程,只有一个主线程的程序叫做单线程程序,主线程负责执行所有代码的执行(UI展现及刷新.网络请求.本 ...

  8. 郑晔谈 Moco 框架的开发:写一个好的内部 DSL ,写一个表达性好的程序

    作者:张龙 出处:http://www.infoq.com/cn/news/2013/07/zhengye-on-moco 郑晔谈Moco框架的开发:写一个好的内部DSL,写一个表达性好的程序 作者  ...

  9. s5k4ba摄像头驱动分析

    注释: 本驱动是基于S5PV310的,但是全天下的摄像头驱动都是采用V4L2,因此驱动框架流程基本差不多.其中fimc_init_camera()函数会回调.init函数,该函数主要就是通过IIC总线 ...

  10. 使用InstelliJ IDEA创建Spring MVC应用程序

    环境版本 Windows 8.1 IDE:InstelliJ IDEA 13    Spring:Spring 4.1.1 & Spring MVC 4.1.1    WebLogic 10. ...