在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 无废话系列教程(二) jquery实战篇上
Jun 23 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
Dec 23 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
Apr 03 Javascript
javascript排序函数实现数字排序
Jun 26 Javascript
详解AngularJS中自定义过滤器
Dec 28 Javascript
JS中用try catch对代码运行的性能影响分析
Dec 26 Javascript
实例讲解Vue.js中router传参
Apr 22 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
JS实现简单的文字无缝上下滚动功能示例
Jun 22 Javascript
JS浮点数运算结果不精确的Bug解决
Aug 01 Javascript
微信小程序3种位置API的使用方法详解
Aug 05 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 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
重量级动漫纷纷停播!唯独OVERLORD第四季正在英魂之刃继续更新
2020/05/06 日漫
也谈截取首页新闻 - 范例
2006/10/09 PHP
APMServ使用说明
2006/10/23 PHP
php imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
php 伪造本地文件包含漏洞的代码
2011/11/03 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
vue 项目如何引入微信sdk接口的方法
2017/12/18 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
vue--vuex详解
2019/04/15 Javascript
使用kbone解决Vue项目同时支持小程序问题
2019/11/08 Javascript
[02:11]2014DOTA2 TI专访VG战队Fenrir:队伍气氛良好
2014/07/11 DOTA
[01:46]2020完美世界全国高校联赛秋季赛报名开启
2020/10/15 DOTA
python下os模块强大的重命名方法renames详解
2017/03/07 Python
Python实现感知机(PLA)算法
2017/12/20 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
详细整理python 字符串(str)与列表(list)以及数组(array)之间的转换方法
2019/08/30 Python
python中return的返回和执行实例
2019/12/24 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
Windows下PyCharm配置Anaconda环境(超详细教程)
2020/07/31 Python
python selenium xpath定位操作
2020/09/01 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
预防传染病方案
2014/06/14 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
单位作风建设自查报告
2014/10/23 职场文书
一年级语文下册复习计划
2015/01/17 职场文书
2015年学生资助工作总结
2015/05/25 职场文书
开网店计划分析
2019/07/30 职场文书
如何用python插入独创性声明
2021/03/31 Python