React16.8更改Webpack支持Less文件

curlyCheng 發布于2019-08-26 10:16 / 1510人閱讀

摘要：創建項目當前最新版本是使用腳手架工具創建一個項目由于要在項目中使用暴露配置文件配置需要暴露配置文件，這就要使用腳手架工具提供的命令，運行命令前需要將項目一下，否則項目無法成功，打開終端運行命令或者，命令是一次性命令，運行后無法恢復

創建項目

當前最新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 更改圖片文件類型

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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