create-react-app 使用 less 函数 不识别

#1

问题描述

我想在文件中定义个 less 函数

.flex-content(@direction: space-between) {  
    display: flex;
    justify-content: @direction;
    align-items: center;
}

并使用这个函数
但是却抛出以下错误1561291173(1)

插件版本

less 版本

"less": "^3.9.0",
"less-loader": "^5.0.0",

使用最新版的 create-react-app

webpack 关于less的配置

  const getStyleLoaders = (cssOptions, preProcessor) => {
    const loaders = [
      isEnvDevelopment && require.resolve('style-loader'),
      isEnvProduction && {
        loader: MiniCssExtractPlugin.loader,
        options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {},
      },
      {
        loader: require.resolve('css-loader'),
        options: cssOptions,
      },
      {
        loader: require.resolve('less-loader'),
        options: {...cssOptions, javascriptEnabled: true},
      },
      {
        // Options for PostCSS as we reference these options twice
        // Adds vendor prefixing based on your specified browser support in
        // package.json
        loader: require.resolve('postcss-loader'),
        options: {
          // Necessary for external CSS imports to work
          // https://github.com/facebook/create-react-app/issues/2677
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
            }),
            // Adds PostCSS Normalize as the reset css with default options,
            // so that it honors browserslist config in package.json
            // which in turn let's users customize the target behavior as per their needs.
            postcssNormalize(),
          ],
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      },
    ].filter(Boolean);
    if (preProcessor) {
      loaders.push({
        loader: require.resolve(preProcessor),
        options: {
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      });
    }
    return loaders;
  };

getstyleLoaders 函数

            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 1,
                  sourceMap: isEnvProduction && shouldUseSourceMap
                 }
              ),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
              {
                  importLoaders: 1,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true, // 模块化
                  getLocalIdent: getCSSModuleLocalIdent,
              }
           ),
        },

具体的less配置

我不知道是哪里 缺少了配置 还是其他的一些 原因 有经验的大佬 指点一番

#2

{
exclude: [/.(js|jsx|mjs)$/,/.(css|less)$/, /.html$/, /.json$/],
loader: require.resolve(‘file-loader’),
options: {
name: ‘static/media/[name].[hash:8].[ext]’,
},
}

#3

在app下增加一个配置文件 config-overrides.js 具体代码可以参考如下：

const {override, addLessLoader, loaderOptions} = require(“customize-cra”);
module.exports = override(addLessLoader(loaderOptions));