5

Preact CLI声称它支持CSS Modules开箱即用。所以这就是我尝试过的；给定 2 个文件index.js并index.module.scss在同一个文件夹中，我尝试了这个：

index.js

import { h, Component } from 'preact';
import styles from './index.module.scss';

export default class Layout extends Component {

  render() {
    console.log(styles);
    return (
      <div className={styles.container}>
        {this.props.children}
      </div>
    );
  }
}

index.module.scss

.container {
  margin: 50px auto;
  max-width: 960px;
  width: 100%;
}

console.log语句打印{}，HTML 中的属性class为空。

我究竟做错了什么？

哦，要安装我刚刚做的这些东西

preact create default my-project
yarn add -D node-sass sass-loader
4

2 回答 2

9

我想我找到了问题所在。preact cli强制您将组件放在src/components文件夹中，否则 css 模块将不起作用。现在确实如此。

为了完成，可以使 CSS 模块在 /components 文件夹之外工作：https ://github.com/developit/preact-cli/issues/522#issuecomment-370835370

于 2018-03-06T15:14:07.910 回答
3

@Lukas 我对你的答案投了赞成票，因为这是真的，但我相信 preact-cli 希望我们使用它的实际方式是将所有可重用的样式添加到style/index.css文件中。这被添加到index.html构建和使用中可以使用普通的 css 引用来引用您的样式<Comp style='my-style' ....

于 2018-07-30T00:05:37.360 回答