在 Create React App 中启用 Sass 和 Less

蔚落 2023-06-18 12:59 11阅读 0赞

# 在 Create React App 中启用 Sass 和 Less #

本文介绍了如何在 Create React App 脚手架中启用 Sass 和 Less。

## 前言 ##

关于创建 create-react-app 项目请查看： **[create-react-app 的安装与创建][create-react-app]。**

关于在 less 和 sass 如何在 create-react-app 启用 CSS Modules，请查看我的上一篇文章：**[在 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` 配置规则放在 `sass` 的解析规则下面即可，如果放在了 `file-loader` 的解析规则下面，`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;

在浏览器中查看效果

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

--------------------

## 再次提醒 ##

配置的时候请注意：关于 `less` 配置规则放在 `sass` 的解析规则下面即可，如果放在了 `file-loader` 的解析规则下面，`less` 文件解析不会生效。

[create-react-app]: https://juejin.im/post/5c3c3df451882525153c2352#heading-0
[Create React App _ CSS Modules]: https://juejin.im/post/5c3c3df451882525153c2352