сочиняет не работает с babel-plugin-react-css-modules

Я пытаюсь использовать модули css в своем проекте React. Я могу делать такие вещи, как:

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

И мои стили извлечены из CSS и успешно снабжены префиксом. Однако, когда я пытаюсь использовать функцию «composes» модулей CSS, мне кажется, что она полностью игнорируется. Я даже не импортирую из других файлов - просто пытаюсь составить локальные классы. Однако, когда я клонирую демонстрационный проект (https://github.com/gajus/babel-plugin-react-css-modules/tree/master/demo) и добавьте «сочиняет» в CSS, это работает. Я не вижу, в чем разница между моим кодом и кодом из демонстрации ...

Мои загрузчики веб-пакетов:

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"
      ]
    }
  }
}

webpack reactjs babeljs css-modules react-css-modules
person Max    schedule 07.01.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Здесь такая же проблема. Обходной путь, который я нашел, заключается в использовании vars вместо composes.

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

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

.button {
  color: var(--blue);
}
person Community    schedule 18.01.2017

arrow_upward
1
arrow_downward

У меня была эта проблема, и я обнаружил, что она была решена добавлением cacheDirectory: false

Например webpack.config.js:

...
module : {
loaders : [
  {
    test : /\.jsx?/,
    include : APP_DIR,
    loader :  'babel-loader',
    query: 'cacheDirectory=false',
  },
...
person Tom    schedule 23.08.2017