Как правильно добавить опции препроцессора css в конфигурацию webpack запущенного приложения create-реагировать?

Мне пришлось eject create-react-app редактировать webpack конфигурации. Я хотел бы добавить .less поддержка файлов, но я не уверен, что сделать это правильно. Конкретно потому что мне нужно добавить options к less-loader,

На данный момент я только редактирую webpack.config.dev.js

Я заметил, что функция getStyleLoaders() делает работу для scss/sass файлы, поэтому я решил использовать его для less, Вот мой код:

{
   test: /\.less$/,
   exclude: /\.module\.less$/, // I don't know if this line is necessary...
   use: getStyleLoaders({ importLoaders: 2 }, 'less-loader'),
},

getStyleLoaders() имеет следующий код:

const getStyleLoaders = (cssOptions, preProcessor, prePorcessorOptions) => {
   const loaders = [
      require.resolve('style-loader'),
      {
         loader: require.resolve('css-loader'),
         options: cssOptions,
      },
      {
         loader: require.resolve('postcss-loader'),
         options: { ... },
      },
   ];
   if (preProcessor) {
     loaders.push(require.resolve(preProcessor));
   }
   return loaders;
};

Теперь я хотел бы добавить options в less-loader, Для этого я решил добавить параметр в getStyleLoaders() поэтому я написал следующее:

{
   test: /\.less$/,
   exclude: /\.module\.less$/, // I don't know if this line is necessary
   use: getStyleLoaders({ importLoaders: 2 }, 'less-loader', {
      modifyVars: { ... },
      javascriptEnabled: true,
   }),
},

И я отредактировал функцию:

const getStyleLoaders = (cssOptions, preProcessor, prePorcessorOptions) => {
   ...
   if (preProcessor) {
     loaders.push(require.resolve(preProcessor));
   }
   // Handle less files ?
   if(prePorcessorOptions) {
      loaders.push({
         loader: preProcessor,
         options: prePorcessorOptions
      });
   }
   return loaders;
};

Да, этот код работает нормально! Но это правильный способ сделать это? Я задаю этот вопрос из-за этого кода:

if(preProcessor) {
   loaders.push(require.resolve(preProcessor));
}

Я чувствую, что эта строка обрабатывает препроцессоры, так что это означает, что код, который я добавил, может быть избыточным... Или, возможно, я ошибаюсь? И если я не, как я могу добавить options оттуда?

0 ответов

Другие вопросы по тегам