Config clash when using own less webpack rules

[jesperorb-caspeco]

Hi,

I have been trying to get this to work with my custom setup with TypeScript and Less and ran into some conflicts regarding webpack-configs. I have gotten it to work by doing the following.

1. Removing the rule for .less in your internal webpack config here:
   

   playroom/lib/makeWebpackConfig.js

   Lines 102 to 124 in 4a06132

   	{
   	test: /\.less$/,
   	include: includePaths,
   	use: [
   	require.resolve('style-loader'),
   	{
   	loader: require.resolve('css-loader'),
   	options: {
   	modules: {
   	mode: 'local',
   	localIdentName: '[name]__[local]--[hash:base64:5]',
   	},
   	},
   	},
   	{
   	loader: require.resolve('postcss-loader'),
   	options: {
   	plugins: () => [require('autoprefixer')()],
   	},
   	},
   	require.resolve('less-loader'),
   	],
   	},

2. Using the following custom config where I have copy pasted your less-rule and supplied my own to just apply to my less files as I am not using modules. So I have two rules for less, one of which is for your code.

const path = require("path");

const playroomPath = path.resolve(__dirname, "node_modules/playroom");

module.exports = {
    components: './source/ui/ui.ts',
    outputPath: './dist',
    webpackConfig: () => ({
      module: {
        rules: [
          {
            test: /\.(ts|tsx)$/,
            include: [
                path.resolve(__dirname, "source/ui"),
                path.resolve(__dirname, "source/common"),
                path.resolve(__dirname, "source/application"),
                path.resolve(__dirname, "source/framework")
            ],
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: [
                  '@babel/preset-env',
                  '@babel/preset-typescript',
                  '@babel/preset-react'
                ]
              }
            }
          },
          {
            test: /\.less$/,
            include: [
                path.resolve(__dirname, "node_modules/playroom/src"),
            ],
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  modules: {
                    mode: 'local',
                    localIdentName: '[name]__[local]--[hash:base64:5]',
                  },
                },
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  plugins: () => [require('autoprefixer')()],
                },
              },
              require.resolve('less-loader')
            ],
          },
          {
            test: /\.less$/,
            include: [
                path.resolve(__dirname, "source")
            ],
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                    importLoaders: 1,
                    sourceMap: true,
                }
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  plugins: () => [require('autoprefixer')()],
                },
              },
              { 
                loader: require.resolve('less-loader'),
                options: {
                    paths: path.resolve(__dirname, "source")
                }
              }
            ],
          }
        ]
      },
      
      resolve: {
        extensions: [".js", ".ts", ".tsx", ".less"],
        alias: {
            common: path.resolve(__dirname, "source/common"),
            ui: path.resolve(__dirname, "source/ui"),
            framework: path.resolve(__dirname, "source/framework"),
            application: path.resolve(__dirname, "source/application")
        }
      }
    })
  };

If I do not remove the rule from your internal config I get the following error:

If I do not apply any .less-rule at all the project will not compile as I need to handle my own less files differently than yours.

My question is, how do I config this so that I don't have to modify your config in node_modules to get it to work? I am not sure it is because of your package or I am failing to config this properly.

[jesperorb-caspeco]

Doesn't clash anymore, no clue what I did to fix it. Closing ☺️