react项目中使用 Sass 或者 Less 的相关配置

注意：

1. 使用脚手架 create-react-app 创建的 react项目，默认使用了webpack ==>> 请注意webpack的版本

2. create-react-app 创建的 react项目，webpack配置默认是隐藏的，如果需要查看或者修改，请使用 npm run eject 命令，

3. 如果webpack是4.x的版本，配置文件 webpack.config.js （一个文件），否则会有 webpack.config.dev.js 和 webpack.config.prod.js 两个文件

一、使用 Sass

首先，看一下webpack.config.js中对css的默认配置：

create-react-app 创建的 react项目，默认就是支持Sass的，使用只需要安装一下 node-sass 这个包即可使用

命令： npm install node-sass -D

测试Sass：

1）创建文件 src/test.scss ==>> 后缀名：.scss

$themeColor: #17B3A3;
p{
  background: $themeColor;
  span{
    color: #0f0
  }
}

2）在App.js 中引入使用

import React from 'react';
import './test.scss'
 
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p className='box'>
          React.
          <span>你好</span>
        </p>
      </header>
    </div>
  );
}
 
export default App;

二、使用Less

1. 安装依赖包：cnpm i --save-dev less less-loader （less 、less-loader两个包）

2. 修改webpack配置 ==>> webpack版本4.x以上，才只用改webpack.config.js一个文件，否则需要改两个哦

   在 webpack.config.js 中 “style files regexes” (40行) 添加 less ==>>即照着Sass改一份Less的

   
   增加的代码如下：

   const lessRegex = /\.less$/;
   const lessModuleRegex = /\.module\.less$/;
   
   // 或者改成这样
   // const lessRegex = /\.(scss|less)$/;
   // const lessModuleRegex = /\.module\.(scss|less)$/;
   

   2.2 增加 Less 编译配置
   增加代码如下：即照着Sass改一份Less的

   //  ====================== 第二处 ==================
           {
             test: lessRegex,
             exclude: lessModuleRegex,
             use: getStyleLoaders(
               {
                 importLoaders: 2,
                 sourceMap: isEnvProduction && shouldUseSourceMap,
               },
               'less-loader'
             ),
             // Don't consider CSS imports dead code even if the
             // containing package claims to have no side effects.
             // Remove this when webpack adds a warning or an error for this.
             // See https://github.com/webpack/webpack/issues/6571
             sideEffects: true,
           },
           // Adds support for CSS Modules, but using SASS
           // using the extension .module.scss or .module.sass
           {
             test: lessModuleRegex,
             use: getStyleLoaders(
               {
                 importLoaders: 2,
                 sourceMap: isEnvProduction && shouldUseSourceMap,
                 modules: true,
                 getLocalIdent: getCSSModuleLocalIdent,
               },
               'less-loader'
             ),
           },
   

   这样，Less的配置就完成了

测试Less：

1）创建文件 src/test.less ==>> 后缀名：.less

@themeColor: #17B3A3;
p{
  background: @themeColor;
  span{
    color: #fcc;
  }
}

2）在App.js 中引入使用

import React from 'react';
import './test.less'
 
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p className='box'>
          React.
          <span>你好</span>
        </p>
      </header>
    </div>
  );
}
export default App;