在Create React App中启用Sass和Less的方法示例


Posted in Javascript onJanuary 16, 2019

关于创建 create-react-app 项目请查看:create-react-app 的安装与创建 。

关于在 less 和 sass 如何在 create-react-app 启用 CSS Modules,请查看我的上一篇文章: 在 Create React App 中使用 CSS Modules 。

启用 Sass 语法编写 CSS

create-react-app 脚手架中已经添加了 sass-loader 的支持,所以只需要安装 node-sass 插件即可

安装 node-sass 插件

$ npm install node-sass --save

# 或者
# $ yarn add node-sass

用法:

编写 sass 文件:App.scss

.App {
 text-align: center;
 &-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 40vmin;
 }
}

在 js 文件中直接使用:改写 App.js 文件

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.scss';

class App extends Component {
 render() {
  return (
   <div className="App">
    <header className="App-header">
     <img src={logo} className="App-logo" alt="logo" />
    </header>
   </div>
  );
 }
}

export default App;

在浏览器中查看效果

运行项目,此时在浏览器中即可查看到 logo 图片在缓慢转动。

启用 Less 语法编写 CSS

由于 create-react-app 脚手架中并没有配置关于 less 文件的解析,所以我们需要自己进行配置。需要安装的插件 less , less-loader 。

添加 Less 相关配置

在命令行运行 npm run eject 命令

此命令会将脚手架中隐藏的配置都展示出来,此过程不可逆

运行完成之后,打开 config 目录下的 webpack.config.js 文件,找到 // style files regexes 注释位置,仿照其解析 sass 的规则,在下面添加两行代码

// 添加 less 解析规则
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

找到 rules 属性配置,在其中添加 less 解析配置

// Less 解析配置
{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
    'less-loader'
  ),
  sideEffects: true,
},
{
  test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: true,
      getLocalIdent: getCSSModuleLocalIdent,
    },
    'less-loader'
  )
}

此时配置完成,安装 less 和 less-loader 插件即可

$ npm install less less-loader --save

用法

以下代码根据上面 sass 用法中的文件进行修改

编写 less 文件:App.less

.App {
 text-align: center;
 &-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 40vmin;
 }
}

在 js 文件中直接使用:改写 App.js 文件

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.less';

class App extends Component {
 render() {
  return (
   <div className="App">
    <header className="App-header">
     <img src={logo} className="App-logo" alt="logo" />
    </header>
   </div>
  );
 }
}

export default App;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery的键盘事件修改代码
Feb 24 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
Nov 30 Javascript
JQuery切换显示的效果实例代码
Feb 27 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
Jun 25 Javascript
jQuery使用经验小技巧(推荐)
May 31 Javascript
Javascript生成带参数的二维码示例
Oct 10 Javascript
JavaScript获取URL参数的方法之一
Mar 24 Javascript
详解Vue.js分发之作用域槽
Jun 13 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
Apr 28 Javascript
JavaScript 继承 封装 多态实现及原理详解
Jul 29 Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 Javascript
swiper实现导航滚动效果
Dec 13 Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 #Javascript
Vue 样式绑定的实现方法
Jan 15 #Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
Jan 15 #Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
Jan 15 #Javascript
mock.js实现模拟生成假数据功能示例
Jan 15 #Javascript
详解webpack引入第三方库的方式以及注意事项
Jan 15 #Javascript
JS高阶函数原理与用法实例分析
Jan 15 #Javascript
You might like
百度实时推送api接口应用示例
2014/10/21 PHP
php curl请求信息和返回信息设置代码实例
2015/04/27 PHP
php解析base64数据生成图片的方法
2016/12/06 PHP
推荐11款jQuery开发的复选框和单选框美化插件
2011/08/02 Javascript
疯狂Jquery第一天(Jquery学习笔记)
2012/05/11 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
2015/12/03 Javascript
js模拟微博发布消息
2017/02/23 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
JS和JQuery实现雪花飘落效果
2017/11/30 jQuery
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
JS实现滑动导航效果
2020/01/14 Javascript
Python的print用法示例
2014/02/11 Python
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
Python max内置函数详细介绍
2016/11/17 Python
python监控键盘输入实例代码
2018/02/09 Python
使用Python读取安卓手机的屏幕分辨率方法
2018/03/31 Python
Python smtplib实现发送邮件功能
2018/05/22 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
python如何爬取动态网站
2020/09/09 Python
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
英国婴儿产品专家:Samuel Johnston
2020/04/20 全球购物
介绍一下linux的文件系统
2015/10/06 面试题
函授药学自我鉴定
2014/02/07 职场文书
办公室员工岗位工作职责
2014/03/10 职场文书
法人委托书范本
2014/09/15 职场文书
2015年母亲节寄语
2015/03/23 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
活动总结书怎么写
2015/05/11 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技