Home > @lynx-js/rspeedy > CssLoader > modules

#CssLoader.modules property

The cssLoader.modules option enables/disables the CSS Modules specification and setup basic behavior.

Signature:

modules?: boolean | 'local' | 'global' | 'pure' | 'icss' | CssLoaderModules | undefined;

#Default Value

Enables CSS Modules with automatic *.module.* detection, camelCase exports, namedExport: false, and localIdentName inherited from output.cssModules.localIdentName.

#Example 1

Using false value to increase performance because we avoid parsing CSS Modules features, it will be useful for developers who use vanilla css or use other technologies.

import { defineConfig } from '@lynx-js/rspeedy'

export default defineConfig({
  tools: {
    cssLoader: {
      modules: false,
    },
  },
})

#Example 2

Using () => true value to enable CSS Modules for all files.

import { defineConfig } from '@lynx-js/rspeedy'

export default defineConfig({
  tools: {
    cssLoader: {
      modules: () => true,
    },
  },
})

#Example 3

Using object value to enable CSS Modules based-on CssLoaderModules.auto option and setup more configurations about CSS Modules.

import { defineConfig } from '@lynx-js/rspeedy'

export default defineConfig({
  tools: {
    cssLoader: {
      modules: {
        namedExport: true,
      },
    },
  },
})