137  
查询码:00000672
在vue中使用sass的配置的方法
来源:https://blog.csdn.net/lily2016n/article/details/75309492
作者: 朱凡 于 2020年05月08日 发布在分类 / FM组 / FM_App 下,并于 2020年05月08日 编辑
安装 博客 使用 install loader 项目 程序 什么 node-sass save-dev

在vue中使用sass的配置的方法


1、创建一个基于 webpack 模板的新项目

$ vue init webpack myvue


2、在当前目录下,安装依赖

$ cd myvue
$ npm install


3、安装sass的依赖包

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass


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

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

如下图所示:
这里写图片描述

5、在APP.vue中修改style标签

<style lang="scss">

6、然后运行项目

$ npm run dev

7、修改APP.vue的样式,可以看下效果
这里写图片描述

8、运行结果背景变成灰色吗,说明你已成功配置好sass

这里写图片描述



 推荐知识

 历史版本

修改日期 修改人 备注
2020-05-08 12:06:42[当前版本] 朱凡 格式调整
2020-05-08 12:06:09 朱凡 创建版本

 附件

附件类型

GIFGIF

知识分享平台 -V 4.8.7 -wcp