如何为React项目添加样式

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

您将需要以下加载器：

1. style-loader
2. css-loader
3. less-loader

所以基本上 webpack 配置如下：

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

检查这个答案以了解每个加载程序的作用。