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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了在Create React App中启用Sass和Less的方法示例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2440字，纯文字阅读大概需要4分钟。

内容图文

关于创建 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和Less的方法示例全部内容，希望文章能够帮你解决在Create React App中启用Sass和Less的方法示例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---