Question

我正在使用preact-cli生成项目，并且可以修改webpack配置。

我想使用以下格式将样式导入到我的组件中；

// Component.scss
.component {
 width: 100px;
 height: 100px;
 background: red;
}


// Component.jsx
import './style.scss';

const Component = () => (
 <div className="component">
 </div>
)
export default Component

使用.scss样式设置样式的组件...

Answer 1

根据preact-cli的latest documentation，您应该在preact应用程序文件夹中运行以下命令：

npm install --save-dev node-sass sass-loader

编辑：

我知道你在做什么错。您必须使用这样的样式：

styles.scss

.test {
  background: red;
}

header.js

import styles from "./style.scss";

const Header = () => (
  <header class={styles.test}>
    <h1>Preact App</h1>
    <nav />
  </header>
);

export default Header;

为什么您必须这样做？

因为它被捆绑了。每种样式都会翻译成一个唯一的名称。例如，.test将是.test__SOmeThiNG。

因此，在任何其他组件中使用类名.test都没有问题。

将其视为组件的沙箱。

Answer 2

当我尝试在src/components组件上的preact项目中导入css / scss文件时，我遇到了同样的问题。从src/components文件夹导入的css / scss文件似乎被视为CSS模块（如here所述），可以像Filip Lintner的回答中那样使用。

一种解决方案是通过在项目根目录中创建preact.config.js来自定义preact-cli，并更改原始的webpack配置以禁用捆绑为CSS模块（类名被哈希化）。就我而言，这就是我在preact.config.js中配置webpack以便仅禁用哈希（来自here的原始两行配置代码段）的方式：

export default {
    webpack(config, env, helpers, options) {
        const [ css ] = helpers.getLoadersByName(config, 'css-loader');
        css.loader.options.modules = false;
    }
};

有关自定义preact-cli的更多信息：https://github.com/preactjs/preact-cli/#webpack

在React中使用sass作为：import'./App.scss';

2 个答案:

为什么您必须这样做？