Vue项目中安装Scss

1. 安装步骤

  1. 安装node-sass,命令如下:
npm install node-sass@4.14.1 --save-dev
  1. 安装sass-loader,命令如下:
npm install sass-loader@7.3.1 --save-dev

注:安装node-sass与sass-loader最好指定其版本,版本之间不对应可能会产生安装错误!!!其版本之间的对应关系可自行百度,也可直接安装以上两个版本,亲测!!!

2. 使用:

话不多说,直接上代码。( 需要注意的是,使用scss时应在style标签中添加lang='scss'属性 )

  1. template中,代码如下所示:
<template>
  <div id="app">
    <h1 class="content">
      小白要努力变强!!!
    </h1>
  </div>
</template>
  1. style中,代码如下所示:
<style lang="scss">
  $baseColor: blue;
  #app {
    .content {
      color: $baseColor;
    }
  }
</style>
  1. 效果如下图所示:
    效果图

    快去试一试吧!!!别忘了点个赞哟!!!

自己先给自己点个赞,冲啊!咱是最棒的!嘿嘿!观看的小可爱一起点个赞呗,求求了!

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容