webpack window 使用sass来编译css样式

本文介绍如何通过npm安装Sass加载器并配置Webpack来处理SCSS文件。通过简单的步骤,包括安装依赖、配置加载规则及创建Sass文件,可以轻松实现样式的模块化管理和动态颜色替换。

1.执行安装:

npm install sass-loader --save-dev (此处不行的话就换上npm install node-sass)

2.稍微修改一下config,删掉我们先前添加的css规则,加上下面的loader


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

添加两个sass文件,variables.scss和main.scss

variables.scss


$red: red;

main.scss


@import "./variables.scss";

h1 {
  color: $red;
}

在index.js中引用


require('./main.scss');

然后发现标题如愿变红,相当简单吧。

来源:链接:http://zhuanlan.zhihu.com/p/20367175

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值