Подключение webpack bem loader

Доброе время суток!

Помогите разобраться с подключением webpack-bem-loader, вроде делов то добавить в конфиг пару строк.

Делаю так:

overrides config

module.exports = function override(config, env) {
  // Add bem-loader in Babel scope
  const babelLoader = config.module.rules[2].oneOf[1];

  config.module.rules[2].oneOf[1] = {
    test: babelLoader.test,
    include: babelLoader.include,
    use: [
      {
        loader: require.resolve('webpack-bem-loader'),
        options: {
          naming: 'react',
          levels: ['./src/blocks'],
          techs: ['js', 'css'],
          techMap: {
              js : ['react.js']
          },
          langs: ['ru', 'en']
        }
      },
      {
        loader: babelLoader.loader,
        options: babelLoader.options
      }
    ]
  };

  return config;
}

Ну и пытаюсь в index.js проекта поймать свой блок App

import App from 'b:App';

который написан как

import React from 'react';
import { decl, Bem } from 'bem-react-core';

export default decl({
  block: 'App',
  content() {
    return (
      <Bem block='App'>asd</Bem>
    );
  }
});

вот мой package.json

{
  "name": "bemdev-plate",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bem-react-core": "^2.2.3",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-scripts": "2.1.1"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "react-app-rewired": "^1.6.2",
    "webpack-bem-loader": "^0.7.0"
  }
}

Помогите разобраться где я не прав? или где читать внимательнее ?

6 years ago

lilliputten

Не знаю, поможет ли: у меня, когда таким способом пользовался (давно уже удаётся обходиться без этого кошмара), было так:

let rules = config.module.rules;
let rules1 = rules[1];
let oneOf = rules1.oneOf;
let oldBabelLoader = oneOf[1];
let babelLoader = {
  test: oldBabelLoader.test,
  include: oldBabelLoader.include,
  use: [
    {
      loader: require.resolve('webpack-bem-loader'),
      options: {
        techs: ['js', 'css'],
      }
    },
    {
      loader: oldBabelLoader.loader,
      options: Object.assign({}, oldBabelLoader.options, {
        presets: [['es2015', {
          loose: true,
        }], 'react'],
        plugins: [
          'transform-object-rest-spread',
        ],
      })
    }
  ]
};
oneOf[1] = babelLoader;

Сейчас удивился, что нету параметра levels.

Но вариант рабочий.

6 years ago

bemdev

Адекватно совместить новый bem core и loader так и не получилось )

Чтобы оставлять комментарии, необходимо авторизоваться.