css - Webpack css/style loader 对类和 id 没有响应

Question

我一直在努力学习webpack。我遇到了将 CSS 作为模块加载的问题。当我使用 css 页面时，程序读取标签没有问题，但由于某种原因不会读取类或 ID。即-

body {
 color: red; //works
}

.row {
 background-color: green; //does not work
}

我的装载机是这样设置的:

{
  test: /\.css/,
  loader: 'style-loader'
}, {
  test: /\.css$/,
  loader: 'css-loader',
  query: {
    modules: true,
    localIdentName: '[name]__[local]___[hash:base64:5]'
  }
}

我的导入看起来像这样:

import styles from './css/main.css';

我也在处理 React jsx 文件，如果这有什么不同的话。我的 jsx 看起来像这样:

<div className="row">
    <div className="eight columns">
      <DOMviewer />
    </div>
    <div className='four columns'>
      <Editor />
    </div>
  </div>

如何让加载程序读取 ID 和类？

Answer 1

与其将字符串“row”用作字符串，不如将其用作 styles 对象的属性，因为实际的类名将由加载程序创建，并将包含一个随机散列，因为这个定义的(这创建了模块的命名空间):

'[name]__[local]___[hash:base64:5]'

例如，要使用“类”行:

<div className={ styles.row }>