react脚手架创建后less无法使用如何解决?

62 阅读1分钟

1.react脚手架创建项目

npx create-react-app my-tsproject --typescript

2.暴露react脚手架的 webpack配置

npm run eject

3.找到webpack.config.js文件

  • 1.style files regexes查询这一行,添加以下代码

    const lessRegex = /\.less$/;
    const lessModuleRegex = /\.module\.lesss$/;
    
  • 2.再搜索到 sassModuleRegex,添加以下代码

    {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: {
                    mode: 'icss',
                  },
                },
                'less-loader'
              ),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: {
                    mode: 'local',
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'less-loader'
              ),
            },

这样less就可以用了,但是不要忘记安装 lessless-loader