如何在vue用scss

1.安装sass 依赖包，在cmd界面输入：

 npm  install sass-loader --save-dev
npm install node-sass --sava-dev

2.在build文件夹下的webpack.base.conf.js的rules里面添加配置

{test: / \.scss$ / ,
loaders: [ 'style' , 'css' , 'sass' ]
}

3.scss使用测试：如下测试修改字体颜色

< style lang = "scss" >
$color : red ;
div { color : $color ;}
</ style >

注意，若是报Node Sass version 7.0.1 is incompatible with ^4.0.0.错误，说明是因为sass的版本不匹配，项目由于安装的node版本不同，安装依赖后导致项目运行失败并有报错问题。

首先需要根据自己电脑安装的node版本对照出当前项目需要下载对应版本的node-sass依赖

去文件夹删除Node Sass文件，重新下载npm install node-sass@4.14.1 --s
最后测试一下

<style lang = "scss" scoped>
@import "../styles/all.scss";
$color:aliceblue;
.login {margin: 20%;padding: 10%;background-color: $color;text-align: center;
}</style>

成功运行

如何在vue用scss相关推荐

如何在vue项目中系统的使用iconfont字体图标
如何在vue项目中系统的使用iconfont字体图标前言 iconfont的特色官网注册在项目中使用的方式前言今天聊一下前端iconfont的使用方式,前端的图标经过这些年的发展,变得更系统 ...
如何在 Vue 项目中使用 echarts
数据的重要性我们大家都知道,就算再小的项目中都可能使用几个图表展示,我最近在做项目的过程中也是需要用到图表,最后选择了echarts 图表库,为什么选择 echarts,第一:简单上手容易,第二:它几 ...
【vue.js开发】如何在vue里面优雅的解决跨域，路由冲突问题
[vue.js开发]如何在vue里面优雅的解决跨域,路由冲突问题当我们在路由里面配置成以下代理可以解决跨域问题 proxyTable: {'/goods/*': {target: 'http://l ...
如何在 Vue 项目中使用 echarts 1
数据的重要性我们大家都知道,就算再小的项目中都可能使用几个图表展示,我最近在做项目的过程中也是需要用到图表,最后选择了echarts 图表库,为什么选择 echarts,第一:简单上手容易,第二:它几 ...
jq的插件 vue中引用_详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
本篇文章主要介绍了详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件,具有一定的参考价值,有兴趣的可以了解一下使用vue-cli构建的vue项目,webpack的配置文 ...
vue 递归创建菜单_如何在Vue中创建类似中等的突出显示菜单
vue 递归创建菜单 by Taha Shashtari 由Taha Shashtari 如何在Vue中创建类似中等的突出显示菜单 (How to Create a Medium-Like Highl ...
如何在vue项目中修改less变量，多主题项目解决方案
如何在vue项目中修改less变量,多主题项目解决方案参考文章: (1)如何在vue项目中修改less变量,多主题项目解决方案 (2)https://www.cnblogs.com/niubilit ...
如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
本文首发:<如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表> 使用 Chart.js 在 Vue 搭建的后台管理工具里添加炫酷的图表,是所有数据展示类后台必备的功 ...
如何在vue项目中使用Highmaps(vue+Highmaps)
如何在vue项目中使用Highmaps 功能需求思路分析实现第一步:引入第二步:介绍一下这个world是个啥. 第三步:调用注意点(十分重要) 写在最后功能需求近日我接到了这么一个需求 ...

如何在vue用scss

如何在vue用scss相关推荐

最新文章

热门文章