在写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. equals方法相关总结

    先说一下Object类吧: 这是一个号称为祖宗类的东西,是所有类的父类,也是唯一一个没有父类的类. 接口不继承object类 并且Object类存在于java的lang包中,我们都知道存在于lang包 ...

  2. python接口自动化-post请求1

    一.查看官方文档 1. 学习一个新的模块,直接用 help 函数就能查看相关注释或案例内容,例如 具体信息如下,可查看 python 发送 ge t和 post 请求的案例: F:\test-req- ...

  3. 从开始到头皮炸裂的python第5天

    头皮炸裂的一天从学到一个新的数据类型开始,这个数据类型的新成员叫做字典,基本的格式为data={键:值,键:值},info.keys()表示所有的键,info.values()表示所有的值,info. ...

  4. redhat 6.5 安装和配置zabbix客户端

    一.安装zabbix-agent端 rpm -ivh http://repo.zabbix.com/zabbix/2.4/rhel/6/x86_64/zabbix-release-2.4-1.el6. ...

  5. future builder

    import 'package:flutter/material.dart';import 'dart:convert';import 'package:http/http.dart' as http ...

  6. Strem_01

    import 'package:flutter/material.dart';import 'dart:async';import 'dart:ui'; void main()=>runApp( ...

  7. Grunt自动化构建环境搭建

    1.环境准备 需要安装Git.Node.Bower.Grunt.Ruby NodeJS https://nodejs.org/en/ Ruby    http://rubyinstaller.org/ ...

  8. 分享:大型Web网站架构演变之9大阶段

    前言 我们以Java Web为例,来搭建一个简单的电商系统,看看这个系统可以如何一步步演变. 该系统具备的功能: 用户模块:用户注册和管理 商品模块:商品展示和管理 交易模块:创建交易和管理 正文 阶 ...

  9. centos7下root密码丢失解决方案

    1 root密码忘记 A.[rd.break方式更改root密码!] 1.重启 CentOS 7.X,在系统引导倒计时的时候快速按键盘上的[ ↑ ]或[ ↓ ]键,使其停留在GRUB菜单界面,并按照下 ...

  10. Python进阶2---树的遍历和堆排序

    二叉树的遍历 堆排序Heap Sort 堆排序的过程 完整过程: #打印完整的二叉树 import math #打印完全二叉树,此函数非必要只是为了显示便利! def print_tree(lst): ...