4

React プロジェクトで CSS モジュールを使用しようとしています。私は次のようなことができます：

import styles from './demo.css'
const Demo = () => <div styleName="demo">Hello</div>

そして、私のスタイルは CSS から取得され、正常にプレフィックスが付けられます。しかし、CSS モジュールの「compose」機能を使おうとすると、完全に無視されているようです。他のファイルからインポートすることすらしていません-ローカルクラスを作成しようとしているだけです。ただし、デモ プロジェクト ( https://github.com/gajus/babel-plugin-react-css-modules/tree/master/demo ) を複製し、CSS に「構成」を追加すると、機能します。私のコードとデモのコードの違いがわかりません...

私のwebpackローダーは次のとおりです。

loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel?cacheDirectory',
        include: PATHS.src
      },
      {
        test: /\.css$/,
        loaders: [
          'style',
          'css?importLoader=1&modules&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
        ],
        include: PATHS.src,
      }
    ]

これは私の.babelrcです：

{
  presets: [
    "es2015",
    "react",
  ],

  plugins: [
    [
      "react-css-modules",
      {
        generateScopedName: "[path]___[name]__[local]___[hash:base64:5]"
      }
    ],
    "transform-object-rest-spread",
  ],
  env: {
    development: {
      presets: [
        "react-hmre"
      ]
    }
  }
}
4

2 に答える 2

1

ここで同じ問題を抱えています。私が見つけた回避策は、compose の代わりに vars を使用することです。

/* colors.css */
:root {
  --color: #4A90E2
}

/* button.css */
@import 'colors.css';

.button {
  color: var(--blue);
}
于 2017-01-18T11:58:03.367 に答える