技術標籤：reactjsless

react 配置less 及相關報錯解決

1、安裝less 依賴

npm install less
npm add less-[email protected]5.0.0(注意安裝的版本不宜過高，否則會報錯)
/*
	ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.
options has an unknown property ‘source’. These properties are valid:
object { lessOptions?, prependData?, appendData?, sourceMap? }
*/
 

2、暴露配置檔案

npm run eject //暴露配置檔案 config

//如果報錯0.1.0 eject: `react-scripts eject`；
 問題原因：腳手架工具為您的專案添加了.gitgnore檔案，但是卻沒有本地倉庫。
解決方法：
	#cd 你的專案目錄
    #git init
    #git add .
    #git commit -m "saving before ejecting"
    #npm run eject
然後再執行npm run eject

3、修改webpack.config.js配置檔案，共三處

// style files regexes
 

const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
## 新增less配置 1
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

// common function to get style loaders
	##新增lessOptions 2
  const getStyleLoaders
 
 = (cssOptions, lessOptions, preProcessor) => {
    const loaders = [
      isEnvDevelopment && require.resolve('style-loader'),
      isEnvProduction && {
        loader: MiniCssExtractPlugin.loader,
        // css is located in `static/css`, use '../../' to locate index.html folder
        // in production `paths.publicUrlOrPath` can be a relative path
        options: paths.publicUrlOrPath.startsWith('.')
          ? { publicPath: '../../' }
          : {},
      },
      {
        loader: require.resolve('css-loader'),
        options: cssOptions,
      },
        ## 新增less-loader 配置 2
        {
            loader: require.resolve('less-loader'),
            options: lessOptions,
        },


            
   ## 新增less配置3
              {
                test: lessRegex,
                exclude: lessModuleRegex,
                use: getStyleLoaders(
                {
                    importLoaders: 2,
                    sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'less-loader'
                ),
                sideEffects: true,
            },
            {
                test: lessModuleRegex,
                use: getStyleLoaders(
                {
                    importLoaders: 2,
                    sourceMap: isEnvProduction && shouldUseSourceMap,
                    modules: true,
                    getLocalIdent: getCSSModuleLocalIdent,
                },
                'less-loader'
                ),
            },