Блог

Главная - Вопросы по программированию - Сборник рассказов 6, использовать пути к модулям?

Сборник рассказов 6, использовать пути к модулям?

#reactjs #typescript #webkit #storybook #sass-loader

#reactjs #typescript #webkit #сборник рассказов #sass-загрузчик

Вопрос:

Можно ли настроить сборник рассказов 6 на использование путей к модулям в моем файле tsconfig.json для работы sass-loader (или просто для репликации того же шаблона, если это невозможно).

В идеале я хотел бы иметь возможность добавлять загрузчик sass с этой опцией:

 additionalData: `
  @use '@themes' as vars;
  @use '@themes/breakpoints' as bp;
`,

вместо

 additionalData: `
  @use '../themes' as vars;
  @use '../themes/breakpoints' as bp;
`,

В моем tsconfig.json файле есть этот раздел, который хорошо работает внутри файлов .ts, но, очевидно, не работает в файлах sass:

 "paths": {
      "@components/*": ["./components/*"]
    }

Если бы я мог повторить это для тем, это было бы потрясающе.

Ответ №1:

Оказывается, это было довольно просто:

в main.js . Добавьте следующее в свой module.exports:

 webpackFinal: async (config, { configType }) => {
 config.resolve.alias = {
    ...config.resolve.alias,
    "@themes": path.resolve(__dirname, "../themes/default")
  }
  return config;
}

Комментарии:

1. Спасибо, мимо меня. Я только что снова столкнулся с этой проблемой и нашел себя!

2. По какой-то причине решение использовать TsconfigPathsPlugin привело к бесконечной загрузке сборника рассказов. Это решение сработало вместо этого.

Ответ №2:

На самом деле, после Алекса, теперь есть лучшее решение, использующее ts-config-paths-webpack-plugin, которое выполняется автоматически и не требует повторения кода конфигурации:

 // main.js

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

const pathsPlugin = new TsconfigPathsPlugin({
  configFile: path.resolve(__dirname, '../tsconfig.json')
})

webpackFinal: async (config) => {
    if (config.resolve.plugins) {
      config.resolve.plugins.push(pathsPlugin);
    } else {
      config.resolve.plugins = [pathsPlugin];
    }
    ...