在写vue的css样式时,觉得需要css预处理器让自己的css更加简洁、适应性更强、可读性更佳,更易于代码的维护,于是在vue-cli脚手架采用scss。写过的人都知道,每写一个.vue文件都要在style上面@import global.scss文件的话,这样很麻烦。css文件可以在main.js中可以直接import,而scss文件import会报错,因此记录下处理的方法。

1. npm install node-sass --save-dev

npm install sass-loader --save-dev

npm install style-loader --save-dev

2. 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/global.scss')
}
}
)

4.修改scss文件名为global.scss

vue安装scss,并且全局引入的更多相关文章

  1. vue项目中设置全局引入scss,使每个组件都可以使用变量

    在Vue项目中使用scss,如果写了一套完整的有变量的scss文件.那么就需要全局引入,这样在每个组件中使用. 可以在mian.js全局引入,下面是使用方法. 1: 安装node-sass.sass- ...

  2. vue 安装scss

    1.安装插件 npm install node-sass --save-devnpm install sass-loader --save-dev 在App页面测试是否可用,在style 上添加< ...

  3. vue cli web pack 全局引入jquery

    之前 装过,装 npm i —save  jquery  然后直接执行了第二步 往后 1,首先在 package.json 里加入, 然后 npm install 2, 在webpack.base.c ...

  4. 【vue】——CDN或全局引入CSS、JS。

    在入口文件index.html中添加 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  5. vue,一路走来(17)--vue使用scss,并且全局引入公共scss样式

    最近朋友问如何在vue项目中使用scss样式,想起之前项目是直接在main.js直接import css文件的,然而main.js不可以直接import scss文件. import './asset ...

  6. vant库在vue全局引入toast组件

    第一步: 在config中引入 // 全局引入vant的提示框 import { Toast } from "vant"; Vue.use(Toast); 第二步: 在组要的.vu ...

  7. vue按需引入/全局引入echarts

    npm install echarts -S 1.按需引入 新建echarts.js公共引入 // 文件路径 @/lib/echarts.js 自行配置 // 加载echarts,注意引入文件的路径 ...

  8. Vue全局引入JS的方法

    两种情况: 1. js为ES5的写法时,如下(自定义的my.js): function fun(){ console.log('hello'); } Vue中的全局引入方式为,在index.html中 ...

  9. vue项目安装scss,以及安装scss报错(this.getResolve is not a function)

    1.安装scss: npm install node-sass sass-loader vue-style-loader --save-dev //安装node-sass sass-loader vu ...

随机推荐

  1. VS 附加到进程 加载“附加进程”弹窗很慢

    最近遇到一个问题,点击Ctrl + Alt + P 附加到进程的时候,弹出下图弹窗“附加到进程”很慢. 找了很多原因,后来发现,是因为少安装了一个插件,安装后,弹窗的耗时明显少了. 下载    Win ...

  2. day 13 迭代器、可迭代对象、迭代器对象、生成器、生成器对象、枚举对象

    迭代器大概念 # 迭代器:循环反馈的容器(集合类型)# -- 不同于索引取值,但也可以循环的从容器对象中从前往后逐个返回内部的值​# 优点:不依赖索引,完成取值# 缺点:不能计算长度,不能指定位取值( ...

  3. 初识服务发现及Consul框架的简单使用

    初识服务发现及Consul框架的简单使用   1.什么是服务发现? 服务发现组件记录了(大规模)分布式系统中所有服务的信息,人们或者其它服务可以据此找到这些服务. DNS 就是一个简单的例子. 当然, ...

  4. ZABBIX监控mysql主从状态

    模板如下 <zabbix_export> <version>3.4</version> <date>2018-11-30T08:28:28Z</d ...

  5. 在区块链上表白——使用C#将一句话放入比特币的区块链上

    最近在看区块链和比特币的知识,顺便简单研究了一下BitCoin的脚本语言,发现OP_RETURN这个命令可以在后面放入自己想说的内容,很多侧链啊,公证之类就是利用了这个特性,可以把一句话,或者一个哈希 ...

  6. Linux基础(一)

    01-服务器 1.1 服务器型号 1.2 电源---双电源 1.3 CPU---计算,(2个CPU=2路) 1.4 内存 面试题:bufffer和cache的区别? buffer:写入数据到内存里,这 ...

  7. vi/vim 使用

    1.  vim一共有4个模式:(linux下最好用的编辑器) 正常模式 (Normal-mode) 插入模式 (Insert-mode) 命令模式 (Command-mode) 可视模式 (Visua ...

  8. [第二届构建之法论坛] 预培训文档(C++版)

    本博客是第二届构建之法论坛暨软件工程培训活动预培训文档中[适用于结对编程部分的C++版本],需要实验者有一部分C++基础. 目录 Part0.背景 Part1.配置环境 Part2.克隆项目 Part ...

  9. ReentrantLock重入锁详解

    1.定义 重入锁:能够支持一个线程对资源的重复加锁,也就是当一个线程获取到锁后,再次获取该锁时而不会被阻塞. 2.可重入锁的应用场景 2.1 如果已经加锁,则不再重复加锁,比如:交互界面点击后响应时间 ...

  10. IntentService+BroadcastReceiver 实现定时任务

    效果图: AlramIntentService package com.example.admin.water; import android.app.AlarmManager;import andr ...