This article describes how to enable Sass and Less in the Create React App scaffold.

preface

For more information on creating the Create-React-app project, see create-React-App Installation and Creation.

For more information on how to enable CSS Modules in the Create-React-app in Less and Sass, see my last article: Using CSS Modules in the Create React App.

Write CSS with Sass syntax enabled

Support for Sass-Loader has been added to create-React-app scaffolding, so you just need to install the Nod-Sass plug-in

Install the Node-Sass plug-in

$ npm install node-sass --save

# or
# $ yarn add node-sass
Copy the code

Usage:

Write the sass file: app.scss

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

Use directly in the js file: rewrite the app.js file

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;
Copy the code

View the effect in your browser

Run the project and you can see the logo slowly rotating in your browser.

Use Less syntax to write CSS

Since the create-React-app scaffold is not configured with less file parsing, we need to configure it ourselves. The less and less-Loader plug-ins need to be installed.

Add Less configuration

  • Run the NPM run eject command on the cli

    This command will show all the hidden configurations in the scaffold. This process is irreversible

  • When this is done, open the webpack.config.js file in the config directory, find the // style Files regexes comment location, and add two lines of code below as it parses sass rules

    // Add less parsing rules
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
Copy the code

  • Find the Rules property configuration and add the less resolution configuration to it

    !!!!!!!!! Note: The following less configuration rules are placed under the sass resolution rules. If the less configuration rules are placed under the file-Loader resolution rules, the less file resolution does not take effect.

    // Less Parses the configuration
{
    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')},Copy the code

  • After the configuration is complete, install the less and less-Loader plug-ins

    $ npm install less less-loader --save
Copy the code

usage

The following code is modified from the file in sass usage above

Write the less file: app.less

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

Use directly in the js file: rewrite the app.js file

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;
Copy the code

View the effect in your browser

Run the project and you can see the logo slowly rotating in your browser.

Once again remind

Note that the less configuration rules are placed under the sASS resolution rules. If the less configuration rules are placed under the file-Loader resolution rules, the less file resolution does not take effect.