css - Preact 类属性为空

Question

今天我尝试在 webpack 中使用 CSS。它几乎对我有用。

这是目标代码。在浏览器类属性中为空。我尝试了具有相同结果的 className，但 CSS 代码包含在包中。

import css from './todo-list.css';

export class C extends Component {
  render() {
    return <h1 class={css.bordered}>title</h1>;
  }
}

如果我只是导入 css 而没有在代码的任何地方引用它然后跳过 CSS 代码。

目前我的解决方法是在某处引用 css 并将 CSS 类硬编码为字符串文字。

import css from './styles.css';

export class C extends Component {
  render() {
    return <h1 class='bordered'><span class={css}>title</span></h1>;
  }
}

我无法发现 preact 的 className 有任何问题。看起来它支持开箱即用。任何关于调试类属性的想法都值得赞赏。

版本:

    "css-loader": "^2.1.1",
    "preact": "^8.4.2",
    "webpack": "^4.28.1"

加载器配置:

      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader']
      },

在浏览器中，css 是一个函数，它返回空对象:

_todo_list_css__WEBPACK_IMPORTED_MODULE_5___default
ƒ getModuleExports() { return module; }

Answer 1

解决方案是在发现通过管道传输时如何配置 webpack 插件的方法之后出现的。

这个配置对我有用:

      {
        test: /\.css$/i,
        use: [
          {
            loader: 'style-loader'      
          },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]         
      }