babel-plugin-react-css-modules не соответствует стилям с styleName

Проблема

Я пытаюсь использовать babel-plugin-react-css -modules в моем проекте React для повышения производительности по сравнению с модулями React CSS.

Однако стили применяются неправильно.

Причина

Версия в теге <style> обернута странным обманом, например:

  • В теге <style>: -components-Foo-___Foo__foo___1fcIZ-
  • В имени класса элемента DOM: components-Foo-___Foo__foo___1fcIZ

Даже если мы используем тот же localIdentName, сгенерированные результаты отличаются от селекторов в css и className в элементе DOM.

(Примечание: в babel-plugin-react-css-modules localIdentName равно [path]___[name]__[local]___[hash:base64:5], как жестко запрограммировано в options.generateScopedName)

Есть идеи, почему есть обертка?


webpack reactjs react-css-modules babel-plugin-react-css-modules
person kavare    schedule 06.12.2017    source источник
comment
Создано другими в исходном репозитории, но пока не удалось github.com / gajus / babel-plugin-react-css-modules / issues / 132   -  person kavare    schedule 06.12.2017

Ответы (1)


arrow_upward
4
arrow_downward

Я нашел решение после некоторой борьбы.

Причина

Это связано с особенностью css-loader: если параметр localIdentName заключен в двойные кавычки, сгенерированное имя класса будет заключено в дефис.

Рабочие примеры

Поэтому вместо того, чтобы делать это в конфигурации webpack:

{
    test: /\.(scss|sass)$/,
    use: [
        'style-loader?sourceMap',
        'css-loader?modules="true"&importLoaders="1"&localIdentName="[path]___[name]__[local]___[hash:base64:5]"',
        'sass-loader?sourceMap',
    ],
},

Сделай это:

{
    test: /\.(scss|sass)$/,
    use: [
        'style-loader?sourceMap',
        'css-loader?modules="true"&importLoaders="1"&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
        'sass-loader?sourceMap',
    ],
},

Или лучше, если вы используете Webpack 2+

{
        test: /\.(scss|sass$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,    
              modules: true,
              sourceMap: true,
              localIdentName: '[path]___[name]__[local]___[hash:base64:5]'
            }
          },
          'sass-loader'
        ]
}
person kavare    schedule 06.12.2017
comment
У меня была такая же проблема, потому что у меня не было строки: localIdentName: '[path] ___ [name] __ [local] ___ [hash: base64: 5] » - person yakka; 11.02.2019