less安装_最全面的React 配置 Less

前言

React 脚手架里面已经配置了 Sass，只需要安装 Sass即可；但是，并没有配置 Less，这需要我们去配置 webpack.config.js。（涉及配置Less的所有报错在下文中均有提出）

在 2020年10月27日，Sass 官方团队正式宣布 Libsass 将弃用，以及基于它的 Node Sass 和 SassC，并且建议用户使用 Dart Sass。
如果你要是用 Sass，直接下载即可使用

npm install sass-loader node-sass --save-dev

配置Less

1. 安装 Less

npm install less less-loader --save

2. 你需要在 webpack.config.js 中配置 Less

然而你会发现使用脚手架创建的项目中并找不到这个文件，原因就是你需要暴露它才能看到它：

npm run eject

然而，就在这个时候，你会发现又报错了：

E: >npm run eject

> my-introduction@0.1.0 eject E:React项目my-introduction
> react-scripts eject

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

? Are you sure you want to eject? This action is permanent. Yes
This git repository has untracked files or uncommitted changes:

package-lock.json
package.json
src/App.css
src/App.js
src/logo.svg
src/pages/home/index.jsx
src/pages/home/style.less

Remove untracked files, stash or commit any changes, and try again.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-introduction@0.1.0 eject: `react-scripts eject`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-introduction@0.1.0 eject script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:UsersAdministratorAppDataRoamingnpm-cache_logs2020-11-14T12_54_29_405Z-debug.log

解决办法在这里：

git add .
git commit -m '暴露'
npm run eject

3. 真正配置 Less

const lessRegex = /.less$/;
const lessModuleRegex = /.module.less$/;

{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders({
    importLoaders: 1,
    modules: true,
    sourceMap: isEnvProduction && shouldUseSourceMap
  },
    "less-loader"
  ),
  sideEffects: true
},
{
  test: lessModuleRegex,
  use: getStyleLoaders({
    importLoaders: 1,
    sourceMap: isEnvProduction && shouldUseSourceMap,
    modules: true,
    getLocalIdent: getCSSModuleLocalIdent
  },
    "less-loader"
  )
},

就在这个时候，你会惊讶的发现，又报错了

ReferenceError: React is not defined

解决方法：

"babel": {
  "presets": [
    [
      "react-app",
      {
        "runtime": "automatic"
      }
    ]
  ]
}

4. 最后，我们来试一试

5. 配置 @

配置了之后， @ 就代表 src 目录，就不用自己 ../

 '@':path.resolve('src')

叄贰壹的博客_CSDN博客-渗透测试,java基础,leetcode领域博主​blog.csdn.net

带只拖鞋去流浪 - 简书​www.jianshu.com

WARNING

商业转载请联系本人，非商业转载请注明出处。