Question

Webpack / CSS专家！

我的NodeJS/React应用程序具有以下结构，我使用Webpack 3.8.1来打包＆amp;捆绑文件。

-app
  |--actions
  |--constants
  |--components
  |--containers
  |--css
  |--reducers
  |--store
-common
-server
-webpack
  |--rules
       |--css
       |--javascript
  |--externals
  |--paths
  |--resolve
  |--webpack.config.js

在开发和生产过程中，一切都按预期工作，但是我一直在努力解决一个问题：外部节点模块CSS 。当我添加一个新的依赖项，它带有某种CSS / SCSS / SASS样式表，并且就此而言使用className来设置不同的组件样式时，我点击了FOUC CSS，其中没有任何外部节点模块的CSS样式已被识别，因此在构建过程完成后webpack 3创建的地图中缺少该文件。

作为一个例子，我使用Material-UI作为依赖项，到目前为止一切正常但是在尝试执行以下操作时：

<IconButton>
    <FontIcon className="muidocs-icon-action-home"/>
</IconButton>

...并且没有显示任何内容。这只是一个例子，我也一直在与其他节点模块一起面对这个问题！所以我认为我的webpack配置或我加载CSS模块的方式有问题。为了供您参考，我创建了gist个webpack个配置文件。

我遇到了一些类似的问题，例如this，但我不确定这是否有助于长期运作，因为我的项目正在变得更大。

你的帮助＆amp;非常感谢您的想法！

[注意] 作为旁注，除了外部 CSS模块之外，当我向main.css添加新的CSS声明时，我仍然需要有类似的东西：

import classNames from "classnames/bind";
import styles from "../../../css/components/timeline.css";
const cx = classNames.bind(styles);

在import部分内，稍后执行以下操作：

<div ref="container"
     className={cx("calendar-style")}/>

正确应用CSS样式，我怀疑这不是最佳的。正如我之前提到的，webpack在.css下的public文件中创建了所有CSS样式的散列图，其内容如下所示：

._1zvVaiwSh1X6O03wrS2gD- {
    height: 100%;
    padding: 0;
    margin: 0;
}
._2W0FVEAQcsYxEbCbWHcCE3 {
    height: 100%;
}...

因此，如上所述，未能使用cx将会遇到与前面所述相同的问题，并且我的CSS样式都不会应用。因此，以下问题将是：webpack如何创建这些hashes以及为什么？如何控制它们的生成与否？

Webpack + React +加载外部模块的CSS

0 个答案: