less的配置過程【 配置檔案是抽離的 】

1. create-react-app建立專案

2. npm run eject 暴露配置項

yarn eject

3. 安裝less less-loader

yarn add less less-loader

4. config/webpack.config.js

加在sass後面

const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

const lessRegex = /\.(less)$/;
const lessModuleRegex = /\.module\.less$/;
 

5. 將以下程式碼賦值進去

​ - https://github.com/rodchen-king/rofo-css/commit/2045d1b36cc3eb509d7f5aa874524c5bca5ec18a?diff=unified
​ - 加在sass-loader後面
​ - 然後將getLocalIdent去掉

```
    {
          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,
            },
            'less-loader'
          ),
        },