@curious19
Здесь я задаю вопросы

Как подключить ant-design с babel-plugin-import?

Делаю SSR сборку с ant-design.

webpack
{
        test: /\.less$/,
        include: [
          resolvePath('../node_modules/antd'), //пробовал без
          resolvePath('../src'),
        ],
        use: [
          IS_DEV && 'isomorphic-style-loader', //сначала был обычны style-loader
          // MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              sourceMap: true,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: () => [
                require('postcss-flexbugs-fixes'),
                autoprefixer({flexbox: 'no-2009'}),
              ],
            },
          },
          {
            loader: 'less-loader',
            options: {
              importLoaders: 1,
              sourceMap: true,
              javascriptEnabled: true,
              modifyVars: themeVariables,
              lessOptions: {
                paths: [resolvePath('../node_modules/antd')], //пробовал без
              },
            },
          },
        ].filter(Boolean),
      },


babel.config.js
module.exports = function(api) {
  api.cache(true);

  const presets = [
    [
      '@babel/preset-env',
      {
        targets: {
          browsers: ['>1%', 'not op_mini all']
        }
      }
    ],
    '@babel/preset-react'
  ];

  const plugins = [
    'react-loadable/babel',
    '@babel/plugin-transform-runtime',
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-syntax-dynamic-import',
    ["import", { "libraryName": "antd", style: true, "libraryDirectory": "lib"}, "antd"]
  ];

  return {
    presets,
    plugins
  };
};


получаю ошибку
ERROR in ./node_modules/antd/lib/button/style/index.less 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> Dmitrijs Balcers '../../style/themes/index';


то есть вроде less не компилится
пробовал разные нагугленные варианты, но они как правило ведут к тому, что просто не срабатывает babel-plugin-import

ЧЯДНТ?
  • Вопрос задан
  • 800 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы