Vue2.x 安装 sass

本文详细介绍如何在项目中安装并配置Sass预处理器及Webpack加载器,包括node-sass、sass-loader和style-loader的安装步骤,以及如何在Webpack配置文件中正确设置Sass加载规则。同时,还提供了在Vue或React项目中使用SCSS语法的示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

步骤一:安装

cnpm install node-sass --save-dev

cnpm install sass-loader --save-dev

cnpm install style-loader --save-dev 

步骤二:配置

打开build文件夹下面的webpack.base.config.js,在module下添加

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

第三步:使用

<style lang='scss' scoped >
.container {
  width: 100px;
  height: 100px;
  background-color: #42b983;

  > .btn {
    width: 50px;
    height: 50px;
    background-image:url("../assets/logo.png");
    background-color:white;
  }
}
</style>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值