React脚手架里面怎么用less？

Posted 2021-09-01 cuter、

React脚手架怎么用less？

yarn eject//暴露脚手架配置

在暴露的config文件里面打开webpack.config.js文件
然后设置less

66行 插入less更改:
const lessRegex = /\\.less$/;
const lessModuleRegex = /\\.module\\.less$/;
500行，插入：
{
    test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders({
    importLoaders: 3,
    sourceMap: isEnvProduction
    ? shouldUseSourceMap
    : isEnvDevelopment,
    }, "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 (https://github.com/css-modules/css-modules)
    // using the extension .module.css
    {
    test: lessModuleRegex,
    use: getStyleLoaders({
    importLoaders: 3,
    sourceMap: isEnvProduction
    ? shouldUseSourceMap
    : isEnvDevelopment,
    modules: {
    getLocalIdent: getCSSModuleLocalIdent,
    },
    }, "less-loader"),
},

• 安装对应的包

yarn add less less-loader@5.0.0//在这里安装的less-loader的包是低版本 高版本可能存在不兼容的问题

• 配置全部变量（在react-app-env.d.ts文件里加入）

declare module '*.less' {
  interface Style {
    [propName: string]: string
  }
  const style: Style
  export default style
}

• 引用

文件名字为style.module.less
引入 import style from './style.module.less'