在 webpack 4 中添加 Less 配置时出错弹出反应应用程序

Question

嗨，我退出了 CRA 以添加更少的配置，但我收到了这样的错误

(./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/less-loader/dist/cjs.js??ref--6-oneOf-3-2!./node_modules/postcss-loader/src??postcss!./src/index.css)

webpack 版本 -4，我以任何方式添加了 less 配置但出现错误，而且我已经安装了 bootstrap css 并且它也出现错误，如“{”在 cli 中丢失

  const getStyleLoaders = (cssOptions, preProcessor) => {
    const loaders = [
      isEnvDevelopment && require.resolve('style-loader'),
      isEnvProduction && {
        options: paths.publicUrlOrPath.startsWith('.')
          ? { publicPath: '../../' }
          : {},
      },
      {
        loader: require.resolve('css-loader'),
        options: cssOptions,
      },
      {
        loader: require.resolve('less-loader'), //added less here
        options: cssOptions,
      },
      {
        loader: require.resolve('postcss-loader'),
        options: {
          ident: 'postcss',
          plugins: () => [
            require.resolve('autoprefixer'),
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
            }),
            postcssNormalize(),
          ],
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      },

并解决

    //less loader
    {
      test:'/\.less$/',
      include: lessModuleRegex,
      use: getStyleLoaders({
        importLoaders: 1,
        sourceMap: isEnvProduction && shouldUseSourceMap,
      },
      'less-loader'
      ),
      sideEffects: true,
    },
    {
      test: /\.module\.less$/,
      use: getStyleLoaders({
        importLoaders: 1,
        sourceMap: isEnvProduction && shouldUseSourceMap,
        modules: {
          getLocalIdent: getCSSModuleLocalIdent,
        },
      },
      'less-loader'
      ),
    },

如何在CRA中少加？

Answer 1

对我来说，通过添加这条规则解决了这个问题（仅此而已，webpack.config.js 中不需要更多更改）：

           {
              test: /\.less$/,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: {
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'less-loader'
              ),
            },

此外，请确保您使用的是最新版本的 less-loader

在 webpack 4 中添加 Less 配置时出错弹出反应应用程序

Getting error when adding Less configuration in webpack 4 ejected react app

less

reactjs

webpack