React16.8更改Webpack支持Less文件

curlyCheng 发布于2019-08-26 10:16 / 1509人阅读

摘要：创建项目当前最新版本是使用脚手架工具创建一个项目由于要在项目中使用暴露配置文件配置需要暴露配置文件，这就要使用脚手架工具提供的命令，运行命令前需要将项目一下，否则项目无法成功，打开终端运行命令或者，命令是一次性命令，运行后无法恢复

创建项目

当前最新React版本是16.8.6
使用create-react-app脚手架工具创建一个项目
由于要在项目中使用AntD

暴露配置文件

配置less-loader需要暴露webpack配置文件，这就要使用create-react-app脚手架工具提供的 eject 命令，运行命令前需要将项目commit一下，否则项目无法eject成功，打开终端运行 yarn eject命令（或者npm run eject），eject命令是一次性命令，运行后无法恢复，

yarn eject

能看到文件中多出了config文件夹

配置less

接下来安装less和less-loader插件包，打开终端输入：

cd your-project
yarn add less less-loader

打开config文件夹，找到webpack.config.js文件打开，主要修改里面的三处地方：

1.修改style files regexes（样式文件正则），找到注释style files regexes，在这部分最后添加如下两行代码：

const lessRegex = /.less$/;
const lessModuleRegex = /.module.less$/;

2.修改 getStyleLoaders 函数，添加代码

{
  loader: require.resolve("less-loader"),
  options: lessOptions,
},

3.添加如下代码，如下图

{
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                "less-loader"
              ),
              // Don"t consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },
            // Adds support for CSS Modules, but using less
            // using the extension .module.scss or .module.less
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                "less-loader"
              ),
            },

至此修改完成，重新打包

GPU云服务器云服务器 react编译后webrtc不支持更改文件格式 less 更改图片文件类型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105897.html

React16.8更改Webpack支持Less文件

摘要：创建项目当前最新版本是使用脚手架工具创建一个项目由于要在项目中使用暴露配置文件配置需要暴露配置文件，这就要使用脚手架工具提供的命令，运行命令前需要将项目一下，否则项目无法成功，打开终端运行命令或者，命令是一次性命令，运行后无法恢复创建项目当前最新React版本是16.8.6使用create-react-app脚手架工具创建一个项目由于要在项目中使用AntD 暴露配置文件配置les...

z2xy 2019-08-30 15:44 评论0 收藏0
【单页面博客从前端到后端】环境搭建

摘要：的配置其中就不多说会解决更改组件的时热更新直接刷新页面的问题。工欲善其事，必先利其器。单页面应用的开发和生产环境涉及文件的编译、压缩、打包、合并等，目前前端最流行的莫过于 webpack 。为了深入了解 webpack 以及其相关插件，我们决定不采用脚手架，自己来搭建基于 webpack 的开发和生产环境。基础环境 nodejs的安装：移步官网建议使用nvm来管理nodejs...

wizChen 2019-08-20 17:03 评论0 收藏0
使用prince-cli，轻松构建高性能React SPA项目~

摘要：对模块进行了打包，监听文件更改刷新等功能，创建了个服务，分别为静态资源服务用于代理本地资源，与自刷新浏览器请求服务用于接受，请求，返回数据服务用于收发消息。除了项目，还可以换成项目。项目地址如果觉得对你有所帮助，多谢支持 prince-cli 快速指南这是一个为快速创建SPA所设计的脚手架，旨在为开发人员提供简单规范的开发方式、服务端环境、与接近native应用的体验。使用它你能够获...

roundstones 2019-08-23 10:29 评论0 收藏0
使用less-loader与antd按需加载(babel-plugin-import)的坑

摘要：的按需加载设置安装插件修改或新建文件进行编辑，但两者只能存一种根据配置更改主题颜色在中找到原配置注释后更改为定义全局样式配置自定义主题只需修改的颜色，再重启项目即可更改主题颜色为了在react中使用antd以及它的主题更改，需要在项目中 yarn eject 暴露出webpack文件进行改造本答案是在日期当时最新的create-react-app上的webpack版本 less-l...

Eminjannn 2019-08-26 14:00 评论0 收藏0
react+webpack项目常用的插件(plugins)

一、HtmlWebpackPlugin使用： npm install html-webpack-plugin --save-dev 解释：这个插件是简化创建生成html（h5）文件用的，如果你引入的文件带有hash值的话，这个尤为的有用，不需要手动去更改引入的文件名！默认生成的是index.html,基本用法为： var HtmlWebpackPlugin = require(html-webp...

cyixlq 2019-08-20 15:52 评论0 收藏0