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

$ npm install node-sass --save

# 或者
# $ yarn add node-sass

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

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;

// 添加 less 解析规则
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.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'
  )
}

$ npm install less less-loader --save

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

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;