1. 程式人生 > 其它 >React 環境 webpack less 配置 及 javascriptEnabled 解決方法

React 環境 webpack less 配置 及 javascriptEnabled 解決方法

create-react-app 建立React 預設不支援less 且webpack配置預設不可見 需要手動配置
第一步:開啟下載webpack React專案配置檔案

注意:必須是全新的專案或者已經提交的專案
執行完成後專案根目錄會增加 config 和 scripts目錄
npm run eject

第二步: 安裝less解析依賴

npm i less less-loader --save-dev

第三步: 修改配置檔案 開啟config目錄下webpack.config.js檔案 搜尋sassModuleRegex 在下一行新增變數 lessRegex和lessModuleRegex

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

第四步:搜尋getStyleLoaders方法 增加引數 preProcessorOptions 及修改方法體

// 修改前
const getStyleLoaders = (cssOptions, preProcessor) {
  ...
  if (preProcessor) {
     loaders.push(
       ...
       {
         loader: require.resolve(preProcessor),
         options: {
           sourceMap: 
true, } } ); } return loaders; } // 修改後 const getStyleLoaders = (cssOptions, preProcessor, preProcessorOptions = { sourceMap: true, }) { ... if (preProcessor) { loaders.push( ... { loader: require.resolve(preProcessor), options: preProcessorOptions } ); } ... }

第四步:搜尋test: sassModuleRegex

{
  test: sassModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
      modules: {
        mode: 'local',
        getLocalIdent: getCSSModuleLocalIdent,
      },
    },
    'sass-loader'
  ),
},
// 增加的內容
{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment
    },
    'less-loader',
    {
      sourceMap: true,
      lessOptions: {
        javascriptEnabled: true // less javascriptEnabled引數
      }
    }
  ),
  sideEffects: true,
},
{
  test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
      modules: {
        getLocalIdent: getCSSModuleLocalIdent,
      }
    },
    'less-loader',
    {
      sourceMap: true,
      lessOptions: {
        javascriptEnabled: true  // less javascriptEnabled引數
      }
    }
  ),
},
注意:less-loader的版本不同,配置不同。
V6.0.0之前
options: {
javascriptEnabled: true
}
V6.0.0之後
options: {
lessOptions: {
javascriptEnabled: true
}
}