logo
  • 指南
  • 配置
  • 插件
  • API
  • 示例
  • 社区
  • Modern.js 2.x 文档
  • 简体中文
    • 简体中文
    • English
    • 配置使用
      dev
      assetPrefix
      beforeStartUrl
      client
      hmr
      host
      https
      lazyCompilation
      liveReload
      port
      progressBar
      setupMiddlewares
      startUrl
      watchFiles
      writeToDisk
      bff
      prefix
      html
      appIcon
      crossorigin
      favicon
      inject
      meta
      mountId
      outputStructure
      scriptLoading
      tags
      templateParameters
      template
      title
      tools
      autoprefixer
      babel
      bundlerChain
      cssExtract
      cssLoader
      devServer
      htmlPlugin
      less
      lightningcssLoader
      minifyCss
      postcss
      rspack
      sass
      styleLoader
      swc
      tsChecker
      source
      aliasStrategy
      alias
      configDir
      decorators
      define
      disableDefaultEntries
      enableAsyncEntry
      entriesDir
      entries
      exclude
      globalVars
      include
      mainEntryName
      preEntry
      transformImport
      resolve
      aliasStrategy
      alias
      conditionNames
      dedupe
      extensions
      server
      baseUrl
      port
      publicRoutes
      routes
      ssrByEntries
      ssr
      output
      assetPrefix
      assetsRetry
      charset
      cleanDistPath
      convertToRem
      copy
      cssModules
      dataUriLimit
      disableCssModuleExtension
      disableInlineRuntimeChunk
      disableSvgr
      disableTsChecker
      distPath
      enableAssetManifest
      enableCssModuleTSDeclaration
      disableInlineRouteManifests
      externals
      filenameHash
      filename
      injectStyles
      inlineScripts
      inlineStyles
      legalComments
      minify
      overrideBrowserslist
      polyfill
      sourceMap
      splitRouteChunks
      ssg
      ssgByEntries
      svgDefaultExport
      tempDir
      plugins
      security
      checkSyntax
      nonce
      sri
      runtime
      介绍
      plugins
      router
      performance
      buildCache
      bundleAnalyze
      chunkSplit
      dnsPrefetch
      preconnect
      prefetch
      preload
      printFileSize
      profile
      removeConsole
      removeMomentLocale
      experiments
      sourceBuild
      builderPlugins
      📝 编辑此页面
      上一页htmlPlugin下一页lightningcssLoader

      #tools.less

      • 类型: Object | Function
      • 默认值:
      const defaultOptions = {
        lessOptions: {
          javascriptEnabled: true,
        },
        // 默认在开发环境下启用 CSS 的 Source Map
        sourceMap: isDev,
      };

      你可以通过 tools.less 修改 less-loader 的配置。

      #Object 类型

      当 tools.less 的值为 Object 类型时,会与默认配置通过 Object.assign 进行浅层合并,值得注意的是,lessOptions 会通过 deepMerge 进行深层合并。

      export default {
        tools: {
          less: {
            lessOptions: {
              javascriptEnabled: false,
            },
          },
        },
      };

      #Function 类型

      当 tools.less 为 Function 类型时,默认配置作为第一个参数传入,可以直接修改配置对象,也可以返回一个值作为最终结果,第二个参数提供了一些可以直接调用的工具函数:

      export default {
        tools: {
          less(config) {
            // 修改 lessOptions 配置
            config.lessOptions = {
              javascriptEnabled: false,
            };
          },
        },
      };

      #修改 Less 版本

      在某些场景下,如果你需要使用特定的 Less 版本,而不是使用 Modern.js 内置的 Less v4,可以在项目中安装需要使用的 Less 版本,并通过 less-loader 的 implementation 选项设置。

      export default {
        tools: {
          less: {
            implementation: require('less'),
          },
        },
      };

      #工具函数

      #addExcludes

      • 类型: (excludes: RegExp | RegExp[]) => void

      用来指定 less-loader 不编译哪些文件,你可以传入一个或多个正则表达式来匹配 less 文件的路径。例如:

      export default {
        tools: {
          less(config, { addExcludes }) {
            addExcludes(/node_modules/);
          },
        },
      };