CODEWITHSUNDEEP
reactjswebpackless
Sukesh
Sukesh

Reputation: 194

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

Hi I ejected CRA to add less config but i'm getting error like this 

(./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 version -4 ,I added the less configuration any way but getting error ,and also i have installed bootstrap css and it also getting error like "{" missing in 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,
        },
      },

And in resolve 

    //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'
      ),
    },

How to add less in CRA?

Upvotes: 0

Views: 132

Answers (1)

misolo
misolo

Reputation: 1120

To me it was solved by adding this rule (just that, no need more changes in webpack.config.js) :

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

Also, Make sure that you're using the latest version of less-loader

Upvotes: 1

Related Questions