主页 / 问题 / 766516
Accepted
Skim
Asked:2020-01-04 21:18:58 +0000 UTC2020-01-04 21:18:58 +0000 UTC

如何在 React 中正确包含来自 node_modules 的 CSS？

  • 772

我正在学习反应。我在不同的代码示例中观察到这种情况。例如 Bootstrap 或 Purecss，它们通过 NPM 添加到项目中。在 React 应用程序中包含此类 CSS 的方式是不同的。他们在某处使用 react-css-modules，在某处他们只是指出 node_modules 目录中所需文件的路径。

1）结果，如何正确连接模块中的css？

2) 如果使用 webpack，是否值得在 React 应用程序中包含 CSS？也许您可以以某种方式配置以构建必要的 css 并将它们包含在 index.html 中？

reactjs

1 个回答

  1. Best Answer

    似乎没有任何“正确”。如果一种方法对您有效并且效果很好，那么它是对的，对吗？

    纯理论上，最好尽量去掉全局依赖，也就是不要通过html文件连接css。顺便提一下，webpack 也可以生成 html 文件。

    因此，我会选择以下选项之一

    一）import 'path-to-bootstrap.css';

    2) webpack 配置中的条目

    这两种情况都需要在 webpack 的 module->rules 部分添加 style-loader 和 css-loader loader，建议写成 include:"node_modules"，这样以后可以将 css bundle 拆分成二 - 你的和供应商（借来的一切）。

    ExtractTextPlugin 插件允许您将 css 提取到单独的 css 包中（默认情况下，所有内容都将转到 js 包）

    HtmlWebpackPlugin 生成 html 文件

    HtmlWebpackIncludeAssetsPlugin 在构建时复制文件和文件夹

    CompressionPlugin 压缩成 gzip

    如果你不能配置 webpack - 写

    • 0

相关问题