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

网络编程 2025/1/3 佚名

2 0 1

蝙蝠岛资源网 Design By www.hbtsch.com

关于创建 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;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

Create,React,App启用Sass,Create,React,App启用Less

标签：

Create,React,App启用Sass,Create,React,App启用Less

蝙蝠岛资源网 Design By www.hbtsch.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

蝙蝠岛资源网 Design By www.hbtsch.com

评论“在Create React App中启用Sass和Less的方法示例”

暂无在Create React App中启用Sass和Less的方法示例的评论...

www.hbtsch.com 蝙蝠岛资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

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

Create,React,App启用Sass,Create,React,App启用Less

微信小程序出现wx.getLocation再次授权问题的解决方法分析

在Create React App中使用CSS Modules的方法示例

评论“在Create React App中启用Sass和Less的方法示例”

更新日志

友情链接