成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React16.8更改Webpack支持Less文件

z2xy / 697人閱讀

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

創(chuàng)建項目 
當(dāng)前最新React版本是16.8.6
使用create-react-app腳手架工具創(chuàng)建一個項目
由于要在項目中使用AntD
暴露配置文件

配置less-loader需要暴露webpack配置文件，這就要使用create-react-app腳手架工具提供的 eject 命令，運行命令前需要將項目commit一下，否則項目無法eject成功，打開終端運行 yarn eject命令（或者npm run eject），eject命令是一次性命令，運行后無法恢復(fù)，

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 函數(shù)，添加代碼

{
  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"
              ),
            },

至此修改完成，重新打包

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116095.html

相關(guān)文章

  • React16.8更改Webpack支持Less文件

    摘要：創(chuàng)建項目當(dāng)前最新版本是使用腳手架工具創(chuàng)建一個項目由于要在項目中使用暴露配置文件配置需要暴露配置文件，這就要使用腳手架工具提供的命令，運行命令前需要將項目一下，否則項目無法成功，打開終端運行命令或者，命令是一次性命令，運行后無法恢復(fù) 創(chuàng)建項目 當(dāng)前最新React版本是16.8.6使用create-react-app腳手架工具創(chuàng)建一個項目由于要在項目中使用AntD 暴露配置文件 配置les...

    curlyCheng 評論0 收藏0

  • 【單頁面博客從前端到后端】環(huán)境搭建

    摘要：的配置其中就不多說會解決更改組件的時熱更新直接刷新頁面的問題。 工欲善其事，必先利其器。單頁面應(yīng)用的開發(fā)和生產(chǎn)環(huán)境涉及文件的編譯、壓縮、打包、合并等，目前前端最流行的莫過于 webpack 。為了深入了解 webpack 以及其相關(guān)插件，我們決定不采用腳手架，自己來搭建基于 webpack 的開發(fā)和生產(chǎn)環(huán)境。 基礎(chǔ)環(huán)境 nodejs的安裝： 移步官網(wǎng) 建議使用nvm來管理nodejs...

    wizChen 評論0 收藏0

  • 使用prince-cli，輕松構(gòu)建高性能React SPA項目~

    摘要：對模塊進(jìn)行了打包，監(jiān)聽文件更改刷新等功能，創(chuàng)建了個服務(wù)，分別為靜態(tài)資源服務(wù)用于代理本地資源，與自刷新瀏覽器請求服務(wù)用于接受，請求，返回數(shù)據(jù)服務(wù)用于收發(fā)消息。除了項目，還可以換成項目。項目地址如果覺得對你有所幫助，多謝支持 prince-cli 快速指南 這是一個為快速創(chuàng)建SPA所設(shè)計的腳手架，旨在為開發(fā)人員提供簡單規(guī)范的開發(fā)方式、服務(wù)端環(huán)境、與接近native應(yīng)用的體驗。使用它你能夠獲...

    roundstones 評論0 收藏0

  • 使用less-loader與antd按需加載(babel-plugin-import)的坑

    摘要：的按需加載設(shè)置安裝插件修改或新建文件進(jìn)行編輯，但兩者只能存一種根據(jù)配置更改主題顏色在中找到原配置注釋后更改為定義全局樣式配置自定義主題只需修改的顏色，再重啟項目即可更改主題顏色 為了在react中使用antd以及它的主題更改，需要在項目中 yarn eject 暴露出webpack文件進(jìn)行改造本答案是在日期當(dāng)時最新的create-react-app上的webpack版本 less-l...

    Eminjannn 評論0 收藏0

  • react+webpack項目常用的插件(plugins)

    一、HtmlWebpackPlugin使用： npm install html-webpack-plugin --save-dev 解釋：這個插件是簡化創(chuàng)建生成html（h5）文件用的，如果你引入的文件帶有hash值的話，這個尤為的有用，不需要手動去更改引入的文件名！ 默認(rèn)生成的是index.html,基本用法為： var HtmlWebpackPlugin = require(html-webp...

    cyixlq 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<