【第24周 01 项目(上) 2-1 flex】App.vue中可以写Scss的样式吗?

【第24周 01 项目(上) 2-1 flex】App.vue中可以写Scss的样式吗?

问题描述:

1. App.vue 是vue格式的文件,其中的css样式可以用scss的方式嵌套写吗?


相关截图:

https://img1.sycdn.imooc.com//climg/6257d32309d837c819721424.jpg

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕星星 2022-04-14 16:51:13

同学你好,普通的css样式不能嵌套。但是vue中可以用scss,前提是安装相关插件,例如:

  • 如果安装的node16版本,需要安装sass和sass-loader插件

npm i --save-dev sass@1.32.7 sass-loader@12.0.0

https://img1.sycdn.imooc.com//climg/6257dfd109bb1fa203500059.jpg

使用:

https://img1.sycdn.imooc.com//climg/6257dfe90914a66202350073.jpg

https://img1.sycdn.imooc.com//climg/6257e00109b7cc7b06250371.jpg

效果:

https://img1.sycdn.imooc.com//climg/6257e0110911bd0f18220026.jpg

  • 如果安装的node是12版本,需要安装node-sass和sass-loader插件

npm i --save-dev node-sass@4.9.0 sass-loader@7.0.1

https://img1.sycdn.imooc.com//climg/6257e0660924b2f903640101.jpg

使用方式和上面一样。

祝学习愉快!

  • 提问者 easyschen #1

    BEM写法是不需要插件的吧:

    https://img1.sycdn.imooc.com//climg/62567f92092edc2905660156.jpg

    https://img1.sycdn.imooc.com//climg/6257e56f09289b5512020662.jpg


    2022-04-14 17:12:19
  • 好帮手慕星星 回复 提问者 easyschen #2

    除了sass相关插件,这种写法不需要额外安装插件。

    2022-04-14 17:52:24
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师