babel-plugin-реагировать-css-modules не соответствует стилям с styleName

Question

вопрос

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

Тем не менее, стили не применяются правильно.

причина

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

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

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

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

Любая идея, почему существует Hypen-фантик?

Answer 1

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

причина

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

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

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

{
    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'
        ]
}