vue项目引入sass

1、安装依赖：

（1）安装sass-loader：

npm install sass-loader --save-dev

（2）安装node-sass：

npm install node-sass --sava-dev

按照上述命令安装，会因sass版本过高导致项目运行报错：

删除之前的，然后安装指定版本：

（1）安装sass-loader：

cnpm install sass-loader@7.3.1 --save-dev

（2）安装node-sass：

cnpm install node-sass@4.14.1 --save-dev

2、配置loader：

在项目中的build目录找到webpack.base.conf.js文件，在该文件module.export中的module.rules加入解释scss文件的loader，具体做法是，在数组中加入一个对象，对象的内容如下：

 //解释scss文件的loader{test: /\.scss$/,loader: 'sass-loader!style-loader!css-loader',},

3、指定语言为scss：

在.vue文件的style标签中加 lang=“scss”，写法如下：

参考：
1、vue2.0项目中使用sass(含sass基础用法示例)
2、Vue项目引进sass
3、Vue中使用Sass

vue项目引入sass相关推荐

vue项目引入sass，node各版本对应node-sass版本
新建的vue项目在引入sass的时候一直报错,经过一上午的折腾,终于研究出来下面的办法: 下面两条命令任选其一执行安装即可,主要是包管理器不同 npm i node-sass@4.14.1 sass- ...
vue项目html引入css,vue项目引入自定义.css的样式文件
ES6的引入方式: .vue文件中 css文件引入 @import "../assets/common/common.css";//自定义.css的样式路径 js文件的引入在ma ...
vue项目引入CNZZ数据专家（方法汇总篇）
vue项目引入CNZZ数据专家(方法汇总篇) 很多网站都有cnzz数据统计,用于分析网站页面受访情况. 今天就来备注一下开发经验: vue如何集成cnzz数据专家进行受访记录? 友盟+CNZZ官方文档 ...
vue项目引入typescript（vue与ts混用）
说明为什么要在vue项目中使用ts? 新公司给了一个关于vue项目的需求,又由于ts是JavaScript的超集,强类型数据,组件化友好.故我选择在vue项目中引入ts. 下载typescript和 ...
VUE项目引入微信JSSDK 实现微信自定义分享
VUE项目引入微信JSSDK 实现自定义分享前端vue.后端php 问题:后端获取config参数所需的url 需要和请求自定义分享页面url一致一.微信公众号后台添加 js安全域名(白名单) 二 ...
vue项目引入阿里巴巴矢量图标库 ——字体图标
1. 打开阿里巴巴矢量图标库官网 iconfont-阿里巴巴矢量图标库 2. 下载图标步骤 (1) (2) (3) (4) (5) (6)main.js 配置引入assets中的图标路径 (7)页 ...
随笔-vue项目引入axios
随笔-vue项目引入axios 本文参考链接: 一安装axios依赖 npm install axios 二引入axios 在main.js中引入,注意与很多第三方模块不同的是,axios不能使用 ...
vue项目引入不符合ES6模块化标准的JS文件
vue项目引入不符合ES6模块化标准的JS文件实现方式实现原理实现方式要引入的文件放在public目录下,在index.html中通过script标签引入实现原理参考vue官网–处理静态资 ...
Vue项目引入Echarts可视化图表库教程踩坑
Apache ECharts是一个基于 JavaScript 的开源可视化图表库,ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表. ...
vue项目引入标签云动画js函数，不执行
vue项目引入标签云动画js函数,数据重新渲染了,但是动画不执行了 rollTagCloud() {/* 3D标签云滚动函数*/const timer = setTimeout(() => {t ...

vue项目引入sass

1、安装依赖：

2、配置loader：

3、指定语言为scss：

vue项目引入sass相关推荐

最新文章

热门文章