vue自我学习笔记——————vue-cli 生成的项目中使用sass

190 阅读 0 评论 126 点赞

我是靠谱客的博主犹豫世界，这篇文章主要介绍vue自我学习笔记——————vue-cli 生成的项目中使用sass，现在分享给大家，希望可以做个参考。

如何在vue-cli 生成的项目中使用sass

1.首先下载npm i -D sass-loader style-loader css-loader node-sass

package.json的目录

2.找到项目中build 文件下的webpack.base.config.js

如下所示，添加{

     test: /.scss$/,
        loaders: ["style-loader", "css-loader", "sass-loader"]
      },

3.运行成功

4.测试demo

<template>
  <div class="container">
    <div class="news">
      <h3>新闻组件</h3>
    </div>
    
  </div>
</template>

<style lang="scss" scoped>
.news{
  background:pink;
  h3 {
    font-size: 20px;
  }
}

</style>

5.效果图

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。