reactjs – 如何为React项目添加样式

发布时间：2020-12-15 05:04:31 所属栏目：百科来源：网络整理

导读：所以我写了一个非常简单的React应用程序,但没有使用create-react-app设置.我想自己学习如何建立CRA之类的东西.我基本上只是使用webpack来构建和捆绑我的React应用程序.目前,我有一个Babel加载器来翻译我的React / JSX,还有一个“html-loader”,对于我的 HTML

所以我写了一个非常简单的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的样式加载器吗？

您将需要以下装载程序：

> style-loader
> css-loader
>少装载机

所以基本上是一个webpack配置如下：

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!