Question

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

我的项目目前还没有CSS样式，我想学习如何添加它。但我对我应该使用的装载机感到困惑。我很确定我的.less文件需要一个Less loader，但Less loader会编译更少的CSS。那么我需要一个CSS加载器来编译较少的文件吗？然后我需要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以了解每个加载器的作用。

Answer 2

您可能需要考虑https://www.styled-components.com/。该库允许您在反应组件旁边找到样式表。如果我是正确的，使用此库不会更改您当前的webpack配置。

如果你想要一个更传统的＆＃34;为您的反应应用程序设置样式的方法，您的webpack配置至少需要两个加载器： style-loader和css-loader。

如果您打算使用css-preprocessors，那么

将需要更少的sass加载器。

如何为React项目添加样式

2 个答案: