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

而不是使用字符串＆＃34; row＆＃34;作为字符串，将其用作styles对象的属性，因为实际的类名将由加载器创建，并且由于此定义将包含随机哈希（这将创建模块的命名空间）：

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

例如，使用＆＃34; class＆＃34;行：

<div className={ styles.row }>

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

1 个答案: