一、Sass

react-scripts@2.0.0 以上版本才适用。
react-scripts主要设计原理是将配置好的如 Webpack，Babel，ESLint ，合并到 react-scripts 这npm包中，用户就可以开箱即用。很多开发者都在这基础上进行改造开发。注意 react-scripts 就是create-react-app脚手架的核心配置代码。

1-1 安装依赖

  1. 要使用Sass必须首先安装   `node-sass`
  3. $ npm install node-sass --save
  4. $ # or
  5. $ yarn add node-sass

安装完之后，我们就可以直接把原来的CSS文件后缀直接改为 .scss 或者.sass,然后组件中导入的文件不再是 css文件而给我scss文件即可。

  1. import React, {Component} from 'react';
  2. import store from './Store/Index';
  3. import {AddNumCreator, MinusNumCreator} from './Store/ActionCreaters';
  4. import './App.scss';
  6. class App extends Component {
  7.   render() {
  8.     return (
  9.       <div className="App">
  10.         <header className="App-header">
  11.           <h1>潇洒</h1>
  12.         </header>
  13.       </div>
  14.     );
  15.   }
  16. }
  18. export default App;

1-2 在sass文件中引入其他sass文件

~ 就代表： node_modules

  1. @import 'styles/colors.scss';   //这边路径以当前文件路径为参照
  2. @import '~bootstrap/dist/css/bootstrap.css';

二、Less

由于 create-react-app 脚手架中并没有配置关于 less 文件的解析，所以我们需要自己进行配置。需要安装的插件 less ， less-loader 。npm install less less-loader

  1. #1.使用 yarn reject暴露配置文件
  2. $ react-scripts eject
  4. NOTE: Create React App 2 supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html
  6. ? Are you sure you want to eject? This action is permanent. (y/N)   y
  8. #2.修改config/webpack.config.js
  9. //找到如下代码
  10. const cssRegex = /\.css$/;
  11. const cssModuleRegex = /\.module\.css$/;
  13. //修改为如下代码
  14. const cssRegex = /\.(css|less)$/;
  15. const cssModuleRegex = /\.module\.(css|less)$/;
  18. //找到这段代码
  19. test: cssRegex,
  20. exclude: cssModuleRegex,
  21. use: getStyleLoaders({
  22.     importLoaders: 1,
  23.     sourceMap: isEnvProduction && shouldUseSourceMap,
  24. }),
  25. // Don't consider CSS imports dead code even if the
  26. // containing package claims to have no side effects.
  27. // Remove this when webpack adds a warning or an error for this.
  28. // See https://github.com/webpack/webpack/issues/6571
  29. sideEffects: true
  32. //修改为如下代码
  33. test: cssRegex,
  34. exclude: cssModuleRegex,
  35. use: getStyleLoaders({
  36.     importLoaders: 2,
  37.     sourceMap: isEnvProduction && shouldUseSourceMap,
  38.   },
  39.     'less-loader'
  40. ),
  41. // Don't consider CSS imports dead code even if the
  42. // containing package claims to have no side effects.
  43. // Remove this when webpack adds a warning or an error for this.
  44. // See https://github.com/webpack/webpack/issues/6571
  45. sideEffects: true,
  48. #3.添加@路径配置，修改config/webpack.config.js
  49. // 找到alias 添加代码如下：
  50.     '@':path.join(__dirname, '..', "src")