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 ...
随机推荐
- SpringBoot2.0之四 简单整合MyBatis
从最开始的SSH(Struts+Spring+Hibernate),到后来的SMM(SpringMVC+Spring+MyBatis),到目前的S(SpringBoot),随着框架的不断更新换代,也为 ...
- centos 7修改时区
在线上环境遇到时间差八小时,怀疑是时区的原因: 然后再linux上运行: date 发现输出的是UTC时间,时间与现在差八个小时 然后通过以下命令去修改时区: ln -sf /usr/share/zo ...
- iOS开发基础篇-Button基础
一.简单介绍 UIButton 的功能:响应用户操作.显示文字.显示图片.调整内部图片和文字的位置. 二. UIButton 的状态 UIControlStateNormal :普通状态,为默认情 ...
- [Oracle维护工程师手记]Data Guard Broker中改属性是否需要两侧分别执行?
Data Guard Broker中改属性是否需要两侧分别执行? Data Guard Broker有一些属性,可以通过 show configuration 看到.我有时会想,这些个属性,是否是分别 ...
- vue-百度地图-maker文字标签显示隐藏
html: <div id="allmap" class="map"></div> script: mounted() { th ...
- 只能用Android studio做平台移植了! 在Windows10下, 开发Android。
安装好IDE后, 会一直显示同步失败, 看看如下步骤: 需要注意的是: -> 安装NDK 自带的NDK版本有问题 自己去下一个15版本的 -> 按照系统提示一步一步安装其他 ...
- DAO 四个包的建立
一.DAO 四个包的建立,降低代码之间的耦合性? 之前写代码,都是在一个包下.代码耦合性较高,不利于后期的维护. dao(代码分层?) 有利于后期的维护代码,修改方便. com.aaa.dao 存放d ...
- Python——三级菜单
#三级菜单函数 menu = { '北京':{ 海淀:{ '五道口':{} '中关村':{} '上帝':{} } '昌平':{} '朝阳':{} '东城':{} }, '上海':{} '山东':{} ...
- 【nginx】nginx的工作模式和信号量控制
nginx是一个多进程/多线程高性能web服务器,在linux系统中,nginx启动后会以后台守护进程(daemon)的方式去运行,后台进程包含一个master进程和多个worker进程(这个数量可以 ...
- CAN总线为什么要有两个120Ω的终端电阻?
1 CAN总线为什么要有两个120Ω的终端电阻? 2 终端电阻的作用是使阻抗连续,消除反射,那为什么只在物理上最远的两个节点加这个匹配电阻,而不是在所有的节点都加上匹配电阻? 高频信号传输时,信号波 ...