要在 create-react-app 脚手架里使用 less 的方法

要在 create-react-app 脚手架里使用 less 的方法:

1. 在 powershell 里暴露脚手架配置

yarn eject

2. 在暴露的 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"),
},

3. 在 powershell 里安装对应的包(在这里安装的 less-loader 的包是低版本 高版本可能存在不兼容的问题)

yarn add less less-loader@5.0.0

4. 配置全部变量(在 react-app-env.d.ts 文件里加入)

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

5. 引用方式(文件名字为 style.module.less)

import style from './style.module.less'