Question

今天，我正在尝试将CSS与webpack一起使用。它几乎对我有用。

这是目标代码。在浏览器中，class属性为空。我尝试了具有相同结果的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>;
  }
}

我无法发现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
            }
          }
        ]         
      }

Preact类属性为空

1 个答案: