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

【问题标题】：Using sass in React as: import './App.scss';在 React 中使用 sass 作为： import './App.scss';
【发布时间】：2019-05-05 15:28:07
【问题描述】：

我正在使用 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 样式设置组件样式...

【问题讨论】：

标签： javascript sass preact

【解决方案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 是没有问题的。

把它想象成你的组件的沙箱。

【讨论】：

这并不能解决问题。我希望能够加载样式并将它们映射到我的组件的类名
我可以很好地导入 sass 文件，但例如如果我这样做； `身体{背景：红色； } .component{ 背景：黑色； } `.components' 背景不会是黑色的
我刚试过；首先我做了preact create default stackoverflow-test 然后 npm install 命令作为回复。将/src/routes/home.css 更改为.scss，将index.js 内部的导入更改为import "./style.scss"（也`import style from "./style.scss";` 的工作方式相同）。然后它的工作。添加 - 我不明白为什么一些小的子组件必须改变你的身体道具。每个组件都必须关心自己。不改变/改变它之外的任何东西:)
我只是更新了答案，刚刚看到您的使用示例中的错误部分。
你不懂...我不想那样做，我想通过匿名引用来使用我的样式。

【解决方案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 的原始 2 行配置 sn-p）：

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

【讨论】：