开发者社区> 黄小凡> 正文

react1.6版本添加sass与less的支持

简介: react1.6版本添加sass与less的支持
+关注继续查看

在新版本的react中分别添加sass与less支持,注意是用create-react-app脚手架工具创建的项目。

添加sass支持

添加sass支持非常简单,只需要执行以下命令安装node-sass即可,如果不生效,请重启项目。

npm i node-sass  --save

添加less支持

添加less支持稍微有点麻烦,因为对sass的支持在create-react-app脚手架中已经配置好了,但是less的没有配置,需要我们手动配置,请按照以下步骤:

安装less和less-loader

npm i less less-loader  --save

释放eject

npm run eject

此命令会在当前目录下生产config文件夹

修改配置文件

打开/config/webpack.config.js文件,找到以下代码:

// Adds support for CSS Modules, but using SASS
            // using the extension .module.scss or .module.sass
            {
              test: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'sass-loader'
              ),
            },
           // **********
           //**********
           // **********
            // "file" loader makes sure those assets get served by WebpackDevServer.
            // When you `import` an asset, you get its (virtual) filename.
            // In production, they would get copied to the `build` folder.
            // This loader doesn't use a "test" so it will catch all modules
            // that fall through the other loaders.

在以上代码中,原来的代码是没有,只是为了突出这个位置,可以看到已经配置好了sass,把*替换为以下代码,然后重启即可。

// 添加less-loader
            {
              test: /\.less$/,
              use: [
                require.resolve('style-loader'),
                {
                  loader: require.resolve('css-loader'),
                  options: {
                    importLoaders: 1,
                  },
                },
                {
                  loader: require.resolve('less-loader') // compiles Less to CSS
                }
              ],
            },

以上。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
ueditor php版本 上传图片添加水印
在文章编辑的时候,使用ueditor上传图片加水印需要修改ueditor部分PHP的源码,我这里大概记录一下。
15 0
Alibaba Arthas 3.1.2版本:增加logger/heapdump/vmoption命令,支持tunnel server
![Arthas](https://alibaba.github.io/arthas/_images/arthas.png) `Arthas`是Alibaba开源的Java诊断工具,深受开发者喜爱。 * Github: https://github.com/alibaba/arthas * 文档:https://alibaba.github.io/arthas Arthas
592 0
【ECS】好消息,弹性网卡支持添加辅助私网IP啦
背景 阿里云的ECS服务器,很早就支持了多网卡的挂载,卸载。近日我们又推出了新功能,每块弹性网卡又支持分配和回收多辅助私网IP地址啦。 实例列表页以及详情页支持管理主网卡的辅助私网IP 在实例列表页,在每一个实例的操作栏里点击 更多 -> 网络和安全组 -> 管理辅助私网IP,可看到,弹出了相应的...
4461 0
phpstorm添加laravle语法支持
PHPStorm神器可以支持更友好的laravel框架代码提示,只需要执行如下才做: 第一步:在项目的composer.json中添加如下一行 1 "require": { 2 "laravel/framework": "5.
811 0
Serverless Kubernetes全面升级2.0架构:支持多命名空间、RBAC、CRD、PV/PVC等功能
阿里云Serverless Kubernetes容器服务最新开放香港、新加坡、悉尼区域,同时全面开放2.0架构,帮助用户更加便捷、轻松地步入“以应用为中心”的全新架构。
3220 0
idea:项目添加SVN和版本管理快捷键
idea:项目添加SVN和版本管理快捷键
18 0
【iOS开发】添加设备到 iOSTeam Provisioning Profile
如果你是 iOS个人开发者的话,那么一定知道,可以在 https://developer.apple.com/account/ios/device/deviceList.action 这个地方添加内测设备的UDID 管理Devices 有一个叫做 iOSTeam Provisioning Profile 的文件。
1138 0
+关注
22
文章
5
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载