美文网首页全栈开发
如何在react中使用less

如何在react中使用less

作者: 森林迷了鹿Andera | 来源:发表于2019-03-20 22:23 被阅读1225次

        菜鸟的我最近刚开始学习react,要想样式不被污染或者重复命名,我们可以使用styled-Components插件,也可以使用Less插件。个人更喜欢less插件。那么我们如何使用呢?

        1.在我们创建好react项目后,我们首先需要安装less,less-loader:

         npm install less less-loader --save-dev 或者 yarn add less less-loader --save-dev

        2.webpack 4.0中,我们只需要配置webpack.config.js文件即可。首先我们需要运行

    npm run eject   来暴露webpack的配置文件,你会发现多了config为名的文件夹。如果这步报错没关系,其实我们只需要在之前运行 git add . 命令,然后再运行  git commit -m "init" 命令就可以解决。

        3.最后是我们需要手动在webpack.config.js里配置less:

    // 在module中做了三处修改 

     // 第一处是找到 `test: /\.css$/` 将其改为 `test: /\.(css|less)$/`

     // 第二处是增加 `less-loader`的配置 

     // 第三处是在exclude属性中增加 `/\.(css|less)$/`

        本人webpack还不是很熟,就是百度搜索了解决了方案。这里是将sass改成了less,也可以手动添加~ 如有不足之处,欢迎留言指导。

    相关文章

      网友评论

        本文标题:如何在react中使用less

        本文链接:https://www.haomeiwen.com/subject/fsyxvqtx.html