vue安装scss,并且全局引入
在写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,并且全局引入的更多相关文章
- vue项目中设置全局引入scss,使每个组件都可以使用变量
在Vue项目中使用scss,如果写了一套完整的有变量的scss文件.那么就需要全局引入,这样在每个组件中使用. 可以在mian.js全局引入,下面是使用方法. 1: 安装node-sass.sass- ...
- vue 安装scss
1.安装插件 npm install node-sass --save-devnpm install sass-loader --save-dev 在App页面测试是否可用,在style 上添加< ...
- vue cli web pack 全局引入jquery
之前 装过,装 npm i —save jquery 然后直接执行了第二步 往后 1,首先在 package.json 里加入, 然后 npm install 2, 在webpack.base.c ...
- 【vue】——CDN或全局引入CSS、JS。
在入口文件index.html中添加 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- vue,一路走来(17)--vue使用scss,并且全局引入公共scss样式
最近朋友问如何在vue项目中使用scss样式,想起之前项目是直接在main.js直接import css文件的,然而main.js不可以直接import scss文件. import './asset ...
- vant库在vue全局引入toast组件
第一步: 在config中引入 // 全局引入vant的提示框 import { Toast } from "vant"; Vue.use(Toast); 第二步: 在组要的.vu ...
- vue按需引入/全局引入echarts
npm install echarts -S 1.按需引入 新建echarts.js公共引入 // 文件路径 @/lib/echarts.js 自行配置 // 加载echarts,注意引入文件的路径 ...
- Vue全局引入JS的方法
两种情况: 1. js为ES5的写法时,如下(自定义的my.js): function fun(){ console.log('hello'); } Vue中的全局引入方式为,在index.html中 ...
- 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 ...
随机推荐
- 等待通知--wait notify
1.简单理解 在jdk1.5之前用于实现简单的等待通知机制,是线程之间通信的一种最原始的方式.考虑这样一种等待通知的场景:A B线程通过一个共享的非volatile的变量flag来实现通信,每当A线程 ...
- .NET平台下,初步认识AutoMapper
初步认识AutoMapper AutoMapper 初步认识AutoMapper 前言 手动映射 使用AutoMapper 创建映射 Conventions 映射到一个已存在的实例对象 前言 通常 ...
- IDEA+快捷键
格式化代码:ctrl+alt+L IDEA快捷键管理:https://blog.csdn.net/h8178/article/details/78328097 (duplicate:为复制上一行)
- 爬虫基础(四)-----MongoDB的使用
------------------------------------------------------------------------摆脱穷人思维 <四> :减少无意义的频繁决策 ...
- jquery动态设置图片路径和超链接href属性
js document.getElementById("myImage").src="hackanm.gif"; jquery $("#img&quo ...
- 三种dedecms友情链接调用标签
三种dedecms友情链接调用标签: 1.获取友情链接分类 {dede:flinktype}<span>[field:typename/]</span>{/dede:flink ...
- Java 显示读取properties 乱码解决方案
项目开发时,在配置springmvc 校验错误提示信息时,配置到properties的中文,在前端取出时,显示为乱码,可以确定properties 配置文件已经被设为UTF-8编码,在springmv ...
- IDEA设置本地maven仓库
IDEA设置本地maven仓库 1.下载apache-maven-3.3.9,解压 2.在系统”环境变量“,”系统变量“设置MVN_HOME,如图: 3.在PATH设置,如: %M2_HOME%\bi ...
- Mysql——Navicat 连接MySQL 8.0.11 出现2059错误
原因 mysql8 之前的版本中加密规则是mysql_native_password,而在mysql8之后,加密规则是caching_sha2_password 解决 更改加密规则: mysql -u ...
- mybatis 中的 update 返回值你真的明白吗
记录源地址:https://www.jianshu.com/p/80270b93082a