“撰写”不适用于 babel-plugin-react-css-modules答案

【问题标题】："composes" not working with babel-plugin-react-css-modules“撰写”不适用于 babel-plugin-react-css-modules
【发布时间】：2017-05-21 23:16:19
【问题描述】：

我正在尝试在我的 React 项目中使用 css 模块。我可以做以下事情：

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

我的样式是从 CSS 中提取并成功添加前缀的。但是，当我尝试使用 CSS 模块的“组合”功能时，它似乎被完全忽略了。我什至没有从其他文件导入 - 只是试图编写本地类。但是，当我克隆演示项目 (https://github.com/gajus/babel-plugin-react-css-modules/tree/master/demo) 并在 CSS 中添加“composes”时，它可以工作。我看不出我的代码和演示中的代码有什么区别......

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

【问题讨论】：

标签： reactjs webpack babeljs css-modules react-css-modules

【解决方案1】：

这里有同样的问题。我发现的解决方法是使用 vars 而不是 composes。

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

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

.button {
  color: var(--blue);
}

【讨论】：

【解决方案2】：

遇到了这个问题，发现添加cacheDirectory: false解决了

例如webpack.config.js:

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

【讨论】：