Блог

Я пытаюсь импортировать less, созданный с помощью другого загрузчика из файла JavaScript.

На основе less-loader s README.md это должно быть возможно:

Используя распознаватель webpack, вы можете импортировать файлы любого типа. Вам просто нужен загрузчик, который экспортирует допустимый меньший код. Часто также требуется установить условие эмитента, чтобы гарантировать, что это правило применяется только к импорту, исходящему из файлов Less.

Но, видимо, это не работает. Файл less всегда заканчивается исходным кодом JavaScript, независимо от того, какие загрузчики я использую. Я также пробовал это с рекомендуемым issuer условием и без него, но безрезультатно. Пользовательский загрузчик, который я написал, чтобы проверить, работает ли он, также не вызывается.

Я использую webpack@5.1.0 with less-loader@7.0.2 .

 // ./webpack.config.js
{
    entry: './index.js',
    mode: 'development',
    module: {
        rules: [
            {
                test: /.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /.less.js$/,
                issuer: /.less$/, // <------
                use: [
                    {
                        loader: require.resolve('./test-loader.js')
                    }
                ]
            }
        ]
    }
}
  

 // ./main.less
@import './import.less.js';

body { background: green; }
  

 // ./index.js
import './main.less';
  

 // ./import.less.js
module.exports = 'body { color: red; }';
  

 // ./test-loader.js
module.exports = (source) => {
  console.log('It should call this loader', source);
  // parse content
  return source;
}
  

Ошибка:

 ERROR in ./main.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./main.less)
Module build failed (from ./node_modules/less-loader/dist/cjs.js):


module.exports = 'body { color: red; }'
             ^
Unrecognised input
      Error in C:UsersUSERProjectsless-issuer-testimport.less.js (line 1, column 15)
 @ ./main.less 2:12-125 9:17-24 13:15-29
 @ ./index.js 1:0-21