Plugins Not Running during less-loader

[MarkJPerry]

I am trying to use the re-write import plugin to solve some issues with the semantic-ui less files and themes.

See here:
http://neekey.net/2016/12/09/integrate-react-webpack-with-semantic-ui-and-theming/
https://www.artembutusov.com/webpack-semantic-ui/

My webpack build fails with the following message: `Can't resolve '../../theme.config'

In the repo below I am trying to replace the other.less import with one to foo.less. As you will see the foo.less file is not imported correctly.

Minimal Example Repo:
https://github.com/MarkJPerry/less-loader-plugin-bug

Any assistance greatly appreciated.

[MarkPerryBV]

So I now know why the less-plugin-rewrite-import plugin is not working. It's all to do with the paths setting in the less-loader and the choice between the WebPackFileManager and the LessFileManager.

Not sure how to resolve my issue now. Will have a think and update.

Update 2:
Turns out that the way to fix it was to use the LessFileManager to resolve less dependancies instead of the WebPackFileManager, this means I supplied the "paths" option to enable it. That then meant I can use the ImportReWritePlugin to rewrite some paths I needed and I managed to get it working.

So not a bug but could be better documented in the less-loader readme and the less-rewriteimport plugin. I will submit a PR once my head finishes exploding.

Please close as this is not a bug.

[neekey]

Thanks for you idea! @MarkPerryBV

I just followed your idea and fixed this in my tutorial, and have updated the demo project as well, should work like a charm now!

[michaelchihuyho]

I ran into the same issue as @MarkPerryBV when using less-plugin-npm-import. I ended up setting paths even though I wasn't really using paths for its intended purpose. I just wanted to make sure that WebpackFileManager didn't get used. Looking through the issues I can see that others are probably running into the same thing.

One way less-loader could solve this is to be smart and call install on plugins and see if they call addFileManager() like this. If they do, don't use the WebpackFileManager. This seems kind of messy though.

Another way would be to just expose another option like useWebpackResolver which could be used to explicitly turn off WebpackFileManager and add a note about it in the README.

[shabunc]

@michael-ciniawsky just to be sure - this is closed because it's not considered an issue, it's an obsolete issue or there's known workaround. It seem to me that this is actually a big deal - any less plugin which relieis on FileManager is not working and it's extremely difficult to figure out what's going on.

[sdb1228]

So with less-loader 6.0 this seems to be a problem again. Digging into it more now but it looks like the plugins under lessOptions break.

[alexander-akait]

@sdb1228 We have tests for plugins from lessOptions and tests are passed, I think problem in the configuration on your side

[sdb1228]

Hmmmm @evilebottnawi Maybe then you can tell me what I am doing wrong? In Less 5 things worked perfectly with less loader config like so

environment.loaders.append(
  'less',
  getStyleRule(/\.(less)$/i, false, [
    {
      loader: 'less-loader',
      options: {
        paths: [ROOT_DIR, NODE_MODULES_DIR], // this will force less-loader to use its own resolver, both should be absolute path
        plugins: [
          new LessPluginRewriteImport({
            paths: {
              '../../theme.config': path.join(ROOT_DIR, 'app', 'javascript', 'semantic_ui', 'theme.config'),
            },
          }),
        ],
      },
    },
  ]),
);

However if I bump to Less 6 and update my config like so

environment.loaders.append(
  'less',
  getStyleRule(/\.(less)$/i, false, [
    {
      loader: 'less-loader',
      options: {
        lessOptions: {
          paths: [ROOT_DIR, NODE_MODULES_DIR], // this will force less-loader to use its own resolver, both should be absolute path
          plugins: [new LessPluginRewriteImport({ paths: { '../../theme.config': THEME_CONFIG } })],
        },
      },
    },
  ]),
);

I get the error message above Can't resolve '../../theme.config'

[alexander-akait]

@sdb1228 Can you open a new issue with minimum reproducible test repo? Looks like a regression

[sdb1228]

Hey @evilebottnawi sorry for just getting to this. Looks like you guys got a fix already for it do you still want a sample repo?

If so I forked one from above https://github.com/sdb1228/less-loader-plugin-bug but can totally make another issue if you want.

[alexander-akait]

@sdb1228 If you still have a problem feel free to open a new issue 😄 Otherwise we don't need a repo 😄

[sdb1228]

Awesome! Thanks @evilebottnawi for the quick response :)