如何为 React 项目添加样式

Question

所以我写了一个非常简单的 React 应用程序，但没有使用 create-react-app 设置。我想自己学习 CRA 这样的东西是如何构建的。我基本上只是使用 webpack 来构建和捆绑我的 React 应用程序。目前，我有一个 Babel 加载器来翻译我的 React/JSX，还有一个 "html-loader"，我想我的 HTML（我读了一个 Webpack 教程说我需要它，但我仍然不不明白为什么我必须翻译我的 HTML？它是 HTML，它甚至翻译成什么）？

我的项目目前还没有 CSS 样式，我想了解如何添加它。但是我对应该使用什么装载机感到困惑。我很确定我的 .less 文件需要一个 Less 加载器，但是 Less 加载器将 Less 编译为 CSS。那么我需要一个 CSS 加载程序来加载已编译的 less 文件吗？然后我需要一个用于 CSS 的样式加载器吗？

Answer 1

您将需要以下装载程序：

style-loader
css-loader
less-loader

基本上 webpack 配置如下：

module: {
    rules: [
        {
            test: /\.less$/,
            use: [
                {
                 loader: "style-loader"
                }, 
                {
                 loader: "css-loader"
                }, 
                {
                 loader: "less-loader"
                }
            ]
        }
    ]
}

检查此以了解每个加载器的作用。

Answer 2

您可能要考虑 https://www.styled-components.com/。该库允许您将样式表与 React 组件一起定位。如果我是正确的，使用这个库不会改变你当前的 webpack 配置。

如果您想要一种更 "traditional" 的方法来设置您的 React 应用程序的样式，您的 webpack 配置至少需要两个加载器：样式加载器和 css-loader.

如果您打算使用 css-预处理器，则需要

less 和 sass 加载器。

如何为 React 项目添加样式

How to add styling to a React project

less

reactjs

webpack