#Interface: CssLoader

The CssLoader controls the options of css-loader.

#Remarks

The default option is as follow:

const defaultOptions = {
  modules: {
    auto: true,
    namedExport: false,
    exportLocalsConvention: 'camelCase',
    localIdentName: output.cssModules.localIdentName,
  },
  sourceMap: output.sourceMap,
  // importLoaders is `1` when compiling css files, and is `2` when compiling sass/less files
  importLoaders: 1 || 2,
};

#Properties

#importLoaders?

optional importLoaders?: 0 | 1 | 2

The option importLoaders allows you to configure how many loaders before css-loader should be applied to @imported resources and CSS modules imports.

#Default Value

1 when compiling CSS files and 2 when compiling Sass or Less files

#Remarks

See css-loader#import-loaders for details.

#modules?

optional modules?: boolean | "local" | "global" | "pure" | "icss" | CssLoaderModules

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

#Default Value

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

#Examples

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

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

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

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

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