css-loader

Getting Started

Warning

To use the latest version of css-loader, webpack@5 is required

npm install --save-dev css-loader

yarn add -D css-loader

pnpm add -D css-loader

import*ascssfrom"file.css";

module.exports={module:{rules:[{test:/\.css$/i,use:["style-loader","css-loader"],},],},};

Options

url

typeurl=|boolean|{filter:(url:string,resourcePath:string)=>boolean;};

url(image.png)=>require('./image.png')url('image.png')=>require('./image.png')url(./image.png)=>require('./image.png')url('./image.png')=>require('./image.png')url('http://dontwritehorriblecode.com/2112.png')=>require('http://dontwritehorriblecode.com/2112.png')image-set(url('image2x.png')1x,url('image1x.png')2x)=>require('./image1x.png')andrequire('./image2x.png')

url(~module/image.png)=>require('module/image.png')url('~module/image.png')=>require('module/image.png')url(~aliasDirectory/image.png)=>require('otherDirectory/image.png')

boolean

module.exports={module:{rules:[{test:/\.css$/i,loader:"css-loader",options:{url:true,},},],},};

object

module.exports={module:{rules:[{test:/\.css$/i,loader:"css-loader",options:{url:{filter:(url,resourcePath)=>{// resourcePath - path to css file// Don't handle `img.png` urlsif(url.includes("img.png")){returnfalse;}// Don't handle images under root-relative /external_images/if(/^\/external_images\//.test(url)){returnfalse;}returntrue;},},},},],},};

import

typeimportFn=|boolean|{filter:(url:string,media:string,resourcePath:string,supports?:string,layer?:string,)=>boolean;};

@import 'style.css' => require('./style.css')@import url(style.css) => require('./style.css')@import url('style.css') => require('./style.css')@import './style.css' => require('./style.css')@import url(./style.css) => require('./style.css')@import url('./style.css') => require('./style.css')@import url('http://dontwritehorriblecode.com/style.css') => @import url('http://dontwritehorriblecode.com/style.css') in runtime

@import url(~module/style.css) => require('module/style.css')@import url('~module/style.css') => require('module/style.css')@import url(~aliasDirectory/style.css) => require('otherDirectory/style.css')

boolean

module.exports={module:{rules:[{test:/\.css$/i,loader:"css-loader",options:{import:true,},},],},};

object

filter

typefilter=(url:string,media:string,resourcePath:string)=>boolean;

module.exports={module:{rules:[{test:/\.css$/i,loader:"css-loader",options:{import:{filter:(url,media,resourcePath)=>{// resourcePath - path to css file// Don't handle `style.css` importif(url.includes("style.css")){returnfalse;}returntrue;},},},},],},};

modules

typemodules=|boolean|"local"|"global"|"pure"|"icss"|{auto:boolean|regExp|((resourcePath:string)=>boolean);mode:|"local"|"global"|"pure"|"icss"|((resourcePath)=>"local"|"global"|"pure"|"icss");localIdentName:string;localIdentContext:string;localIdentHashSalt:string;localIdentHashFunction:string;localIdentHashDigest:string;localIdentRegExp:string|regExp;getLocalIdent:(context:LoaderContext,localIdentName:string,localName:string,)=>string;namedExport:boolean;exportGlobals:boolean;exportLocalsConvention:|"as-is"|"camel-case"|"camel-case-only"|"dashes"|"dashes-only"|((name:string)=>string);exportOnlyLocals:boolean;getJSON:({        resourcePath,        imports,        exports,        replacements,}:{resourcePath:string;imports:object[];exports:object[];replacements:object[];})=>Promise<void>|void;};

module.exports={module:{rules:[{test:/\.css$/i,loader:"css-loader",options:{modules:true,},},],},};

Features

Scope

:local(.className) {background: red;}:local .className {color: green;}:local(.className .subClass) {color: green;}:local .className .subClass:global(.global-class-name) {color: blue;}

._23_aKvs-b8bW2Vg3fwHozO {background: red;}._23_aKvs-b8bW2Vg3fwHozO {color: green;}._23_aKvs-b8bW2Vg3fwHozO ._13LGdX8RMStbBE9w-t0gZ1 {color: green;}._23_aKvs-b8bW2Vg3fwHozO ._13LGdX8RMStbBE9w-t0gZ1 .global-class-name {color: blue;}

Note

Identifiers are exported

exports.locals={className:"_23_aKvs-b8bW2Vg3fwHozO",subClass:"_13LGdX8RMStbBE9w-t0gZ1",};

Composing

:local(.className) {background: red;color: yellow;}:local(.subClass) {composes: className;background: blue;}

exports.locals={className:"_23_aKvs-b8bW2Vg3fwHozO",subClass:"_13LGdX8RMStbBE9w-t0gZ1 _23_aKvs-b8bW2Vg3fwHozO",};

._23_aKvs-b8bW2Vg3fwHozO {background: red;color: yellow;}._13LGdX8RMStbBE9w-t0gZ1 {background: blue;}

Importing

Note

It is highly recommended to include file extensions when importing a file, since it is possible to import a file with any extension and it is not known in advance which file to use.

:local(.continueButton) {composes: button from"library/button.css";background: red;}

:local(.nameEdit) {composes: edit highlight from"./edit.css";background: red;}

:local(.className) {composes:    edit highlight from"./edit.css",    button from"module/button.css",    classFromThisModule;background: red;}

:local(.className) {composes: edit highlight from"./edit.css";composes: button from"module/button.css";composes: classFromThisModule;background: red;}

Values

@value v-primary:#BF4040;@value s-black: black-selector;@value m-large: (min-width:960px);.header {color: v-primary;padding:010px;}.s-black {color: black;}@media m-large {  .header {padding:020px;  }}

boolean

module.exports={module:{rules:[{test:/\.css$/i,loader:"css-loader",options:{modules:true,},},],},};

string

module.exports={module:{rules:[{test:/\.css$/i,loader:"css-loader",options:{// Using `local` value has same effect like using `modules: true`modules:"global",},},],},};

object

module.exports={module:{rules:[{test:/\.css$/i,loader:"css-loader",options:{modules:{mode:"local",auto:true,exportGlobals:true,localIdentName:"[path][name]__[local]--[hash:base64:5]",localIdentContext:path.resolve(__dirname,"src"),localIdentHashSalt:"my-custom-hash",namedExport:true,exportLocalsConvention:"as-is",exportOnlyLocals:false,getJSON:({ resourcePath, imports, exports, replacements})=>{},},},},],},};

auto

typeauto=|boolean|regExp|((resourcePath:string,resourceQuery:string,resourceFragment:string,)=>boolean);

boolean

module.exports={module:{rules:[{test:/\.css$/i,loader:"css-loader",options:{modules:{auto:true,},},},],},};

RegExp

module.exports={module:{rules:[{test:/\.css$/i,loader:"css-loader",options:{modules:{auto:/\.custom-module\.\w+$/i,},},},],},};

function

module.exports={module:{rules:[{test:/\.css$/i,loader:"css-loader",options:{modules:{auto:(resourcePath,resourceQuery,resourceFragment)=>{returnresourcePath.endsWith(".custom-module.css");},},},},],},};

mode

typemode=|"local"|"global"|"pure"|"icss"|((resourcePath:string,resourceQuery:string,resourceFragment:string,)=>"local"|"global"|"pure"|"icss");

string

module.exports={module:{rules:[{test:/\.css$/i,loader:"css-loader",options:{modules:{mode:"global",},},},],},};

function

module.exports={module:{rules:[{test:/\.css$/i,loader:"css-loader",options:{modules:{// Callback must return "local", "global", or "pure" valuesmode:(resourcePath,resourceQuery,resourceFragment)=>{if(/pure.css$/i.test(resourcePath)){return"pure";}if(/global.css$/i.test(resourcePath)){return"global";}return"local";},},},},],},};

localIdentName

typelocalIdentName=string;

module.exports={module:{rules:[{test:/\.css$/i,loader:"css-loader",options:{modules:{localIdentName:"[path][name]__[local]--[hash:base64:5]",},},},],},};

localIdentContext

typelocalIdentContex=string;

module.exports={module:{rules:[{test:/\.css$/i,loader:"css-loader",options:{modules:{localIdentContext:path.resolve(__dirname,"src"),},},},],},};

localIdentHashSalt

typelocalIdentHashSalt=string;

module.exports={module:{rules:[{test:/\.css$/i,loader:"css-loader",options:{modules:{localIdentHashSalt:"hash",},},},],},};

localIdentHashFunction

typelocalIdentHashFunction=string;

module.exports={module:{rules:[{test:/\.css$/i,loader:"css-loader",options:{modules:{localIdentHashFunction:"md4",},},},],},};

localIdentHashDigest

typelocalIdentHashDigest=string;

module.exports={module:{rules:[{test:/\.css$/i,loader:"css-loader",options:{modules:{localIdentHashDigest:"base64",},},},],},};

localIdentHashDigestLength

typelocalIdentHashDigestLength=number;

module.exports={module:{rules:[{test:/\.css$/i,loader:"css-loader",options:{modules:{localIdentHashDigestLength:5,},},},],},};

hashStrategy

module.exports={module:{rules:[{test:/\.css$/i,loader:"css-loader",options:{modules:{hashStrategy:"minimal-subset",},},},],},};

localIdentRegExp

typelocalIdentRegExp=string|RegExp;

module.exports={module:{rules:[{test:/\.css$/i,loader:"css-loader",options:{modules:{localIdentRegExp:/page-(.*)\.css/i,},},},],},};

getLocalIdent

typegetLocalIdent=(context:LoaderContext,localIdentName:string,localName:string,)=>string;

module.exports={module:{rules:[{test:/\.css$/i,loader:"css-loader",options:{modules:{getLocalIdent:(context,localIdentName,localName,options)=>{return"whatever_random_class_name";},},},},],},};

namedExport

typenamedExport=boolean;

Warning

Thedefault class name cannot be used directly whennamedExport istrue becausedefault is a reserved keyword in ECMAScript modules. It is automatically renamed to_default.

.foo-baz {color: red;}.bar {color: blue;}.default {color: green;}

import*asstylesfrom"./styles.css";// If using `exportLocalsConvention: "as-is"` (default value):console.log(styles["foo-baz"],styles.bar);// If using `exportLocalsConvention: "camel-case-only"`:console.log(styles.fooBaz,styles.bar);// For the `default` classnameconsole.log(styles["_default"]);

module.exports={module:{rules:[{test:/\.css$/i,loader:"css-loader",options:{esModule:true,modules:{namedExport:true,},},},],},};

exportGlobals

typeexportsGLobals=boolean;

module.exports={module:{rules:[{test:/\.css$/i,loader:"css-loader",options:{modules:{exportGlobals:true,},},},],},};

exportLocalsConvention

typeexportLocalsConvention=|"as-is"|"camel-case"|"camel-case-only"|"dashes"|"dashes-only"|((name:string)=>string);

Warning

Names of locals are converted to camelCase when the named export isfalse, i.e. theexportLocalsConvention option hascamelCaseOnly value by default.You can set this back to any other valid option but selectors which are not valid JavaScript identifiers may run into problems which do not implement the entire modules specification.

string

.class-name {}

import{className}from"file.css";

module.exports={module:{rules:[{test:/\.css$/i,loader:"css-loader",options:{modules:{exportLocalsConvention:"camel-case-only",},},},],},};

function

module.exports={module:{rules:[{test:/\.css$/i,loader:"css-loader",options:{modules:{exportLocalsConvention:function(name){returnname.replace(/-/g,"_");},},},},],},};

module.exports={module:{rules:[{test:/\.css$/i,loader:"css-loader",options:{modules:{exportLocalsConvention:function(name){return[name.replace(/-/g,"_"),// dashesCamelCasename.replace(/-+(\w)/g,(match,firstLetter)=>firstLetter.toUpperCase(),),];},},},},],},};

exportOnlyLocals

typeexportOnlyLocals=boolean;

module.exports={module:{rules:[{test:/\.css$/i,loader:"css-loader",options:{modules:{exportOnlyLocals:true,},},},],},};

getJSON

typegetJSON=({  resourcePath,  imports,  exports,  replacements,}:{resourcePath:string;imports:object[];exports:object[];replacements:object[];})=>Promise<void>|void;

[  {"type":"icss_import","importName":"___CSS_LOADER_ICSS_IMPORT_0___","url":"\"-!../../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../../../../node_modules/postcss-loader/dist/cjs.js!../../../../../node_modules/sass-loader/dist/cjs.js!../../../../baz.module.css\"","icss":true,"index":0  }]

[  {"name":"main","value":"D2Oy"  }]

{"replacementName":"___CSS_LOADER_ICSS_IMPORT_0_REPLACEMENT_0___","importName":"___CSS_LOADER_ICSS_IMPORT_0___","localName":"main"}

constpath=require("path");constfs=require("fs");constCSS_LOADER_REPLACEMENT_REGEX=/(___CSS_LOADER_ICSS_IMPORT_\d+_REPLACEMENT_\d+___)/g;constREPLACEMENT_REGEX=/___REPLACEMENT\[(.*?)]\[(.*?)]___/g;constIDENTIFIER_REGEX=/\[(.*?)]\[(.*?)]/;constreplacementsMap={};constcanonicalValuesMap={};constallExportsJson={};functiongenerateIdentifier(resourcePath,localName){return`[${resourcePath}][${localName}]`;}functionaddReplacements(resourcePath,imports,exportsJson,replacements){constimportReplacementsMap={};// create a dict to quickly identify imports and get their absolute stand-in strings in the currently loaded file// e.g., { '___CSS_LOADER_ICSS_IMPORT_0_REPLACEMENT_0___': '___REPLACEMENT[/foo/bar/baz.css][main]___' }importReplacementsMap[resourcePath]=replacements.reduce((acc,{ replacementName, importName, localName})=>{constreplacementImportUrl=imports.find((importData)=>importData.importName===importName,).url;constrelativePathRe=/.*!(.*)"/;const[,relativePath]=replacementImportUrl.match(relativePathRe);constimportPath=path.resolve(path.dirname(resourcePath),relativePath);constidentifier=generateIdentifier(importPath,localName);return{ ...acc,[replacementName]:`___REPLACEMENT${identifier}___`};},{},);// iterate through the raw exports and add stand-in variables// ('___REPLACEMENT[<absolute_path>][<class_name>]___')// to be replaced in the plugin belowfor(const[localName,classNames]ofObject.entries(exportsJson)){constidentifier=generateIdentifier(resourcePath,localName);if(CSS_LOADER_REPLACEMENT_REGEX.test(classNames)){// if there are any replacements needed in the concatenated class names,// add them all to the replacements map to be replaced altogether laterreplacementsMap[identifier]=classNames.replaceAll(CSS_LOADER_REPLACEMENT_REGEX,(_,replacementName)=>importReplacementsMap[resourcePath][replacementName],);}else{// otherwise, no class names need replacements so we can add them to// canonical values map and all exports JSON verbatimcanonicalValuesMap[identifier]=classNames;allExportsJson[resourcePath]=allExportsJson[resourcePath]||{};allExportsJson[resourcePath][localName]=classNames;}}}functionreplaceReplacements(classNames){returnclassNames.replaceAll(REPLACEMENT_REGEX,(_,resourcePath,localName)=>{constidentifier=generateIdentifier(resourcePath,localName);if(identifierincanonicalValuesMap){returncanonicalValuesMap[identifier];}// Recurse through other stand-in that may be importsconstcanonicalValue=replaceReplacements(replacementsMap[identifier]);canonicalValuesMap[identifier]=canonicalValue;returncanonicalValue;},);}functiongetJSON({ resourcePath, imports, exports, replacements}){constexportsJson=exports.reduce((acc,{ name, value})=>{return{ ...acc,[name]:value};},{});if(replacements.length>0){// replacements present --> add stand-in values for absolute paths and local names,// which will be resolved to their canonical values in the plugin belowaddReplacements(resourcePath,imports,exportsJson,replacements);}else{// no replacements present --> add to canonicalValuesMap verbatim// since all values here are canonical/don't need resolutionfor(const[key,value]ofObject.entries(exportsJson)){constid=`[${resourcePath}][${key}]`;canonicalValuesMap[id]=value;}allExportsJson[resourcePath]=exportsJson;}}classCssModulesJsonPlugin{constructor(options){this.options=options;}// eslint-disable-next-line class-methods-use-thisapply(compiler){compiler.hooks.emit.tap("CssModulesJsonPlugin",()=>{for(const[identifier,classNames]ofObject.entries(replacementsMap)){constadjustedClassNames=replaceReplacements(classNames);replacementsMap[identifier]=adjustedClassNames;const[,resourcePath,localName]=identifier.match(IDENTIFIER_REGEX);allExportsJson[resourcePath]=allExportsJson[resourcePath]||{};allExportsJson[resourcePath][localName]=adjustedClassNames;}fs.writeFileSync(this.options.filepath,JSON.stringify(// Make path to be relative to `context` (your project root)Object.fromEntries(Object.entries(allExportsJson).map((key)=>{key[0]=path.relative(compiler.context,key[0]).replace(/\\/g,"/");returnkey;}),),null,2,),"utf8",);});}}module.exports={module:{rules:[{test:/\.css$/i,loader:"css-loader",options:{modules:{ getJSON}},},],},plugins:[newCssModulesJsonPlugin({filepath:path.resolve(__dirname,"./output.css.json"),}),],};

{"foo/bar/baz.module.css": {"main":"D2Oy","header":"thNN"  },"foot/bear/bath.module.css": {"logo":"sqiR","info":"XMyI"  }}

importLoaders

typeimportLoaders=number;

module.exports={module:{rules:[{test:/\.css$/i,use:["style-loader",{loader:"css-loader",options:{importLoaders:2,// 0 => no loaders (default);// 1 => postcss-loader;// 2 => postcss-loader, sass-loader},},"postcss-loader","sass-loader",],},],},};

sourceMap

typesourceMap=boolean;

module.exports={module:{rules:[{test:/\.css$/i,loader:"css-loader",options:{sourceMap:true,},},],},};

esModule

typeesModule=boolean;

module.exports={module:{rules:[{test:/\.css$/i,loader:"css-loader",options:{esModule:false,},},],},};

exportType

typeexportType="array"|"string"|"css-style-sheet";

module.exports={module:{rules:[{assert:{type:"css"},loader:"css-loader",options:{exportType:"css-style-sheet",},},],},};

importsheetfrom"./styles.css"assert{type: "css"};document.adoptedStyleSheets=[sheet];shadowRoot.adoptedStyleSheets=[sheet];

'array'

module.exports={module:{rules:[{test:/\.(sa|sc|c)ss$/i,use:["style-loader","css-loader","postcss-loader","sass-loader"],},],},};

// `style-loader` applies styles to DOMimport"./styles.css";

'string'

Warning

You should not usestyle-loader ormini-css-extract-plugin with this value.

TheesModule option should be enabled if you want to use it withCSS modules. By default for localsnamed export will be used.

module.exports={module:{rules:[{test:/\.(sa|sc|c)ss$/i,use:["css-loader","postcss-loader","sass-loader"],},],},};

importsheetfrom"./styles.css";console.log(sheet);

'css-style-sheet'

Warning

@import rules not yet allowed, moreinformation

Warning

You don't needstyle-loader anymore, please remove it.

Warning

TheesModule option should be enabled if you want to use it withCSS modules. By default for localsnamed export will be used.

Warning

Source maps are not currently supported inChrome due to abug

module.exports={module:{rules:[{assert:{type:"css"},loader:"css-loader",options:{exportType:"css-style-sheet",},},// For Sass/SCSS://// {//   assert: { type: "css" },//   rules: [//     {//       loader: "css-loader",//       options: {//         exportType: "css-style-sheet",//         // Other options//       },//     },//     {//       loader: "sass-loader",//       options: {//         // Other options//       },//     },//   ],// },],},};

// Example for Sass/SCSS:// import sheet from "./styles.scss" assert { type: "css" };// Example for CSS modules:// import sheet, { myClass } from "./styles.scss" assert { type: "css" };// Example for CSS:importsheetfrom"./styles.css"assert{type: "css"};document.adoptedStyleSheets=[sheet];shadowRoot.adoptedStyleSheets=[sheet];

module.exports={module:{rules:[{test:/\.css$/i,oneOf:[{assert:{type:"css"},loader:"css-loader",options:{exportType:"css-style-sheet",// Other options},},{use:["style-loader",{loader:"css-loader",options:{// Other options},},],},],},],},};

Examples

Recommend

Note

Do not usestyle-loader andmini-css-extract-plugin together.

constMiniCssExtractPlugin=require("mini-css-extract-plugin");constdevMode=process.env.NODE_ENV!=="production";module.exports={module:{rules:[{// If you enable `experiments.css` or `experiments.futureDefaults`, please uncomment line below// type: "javascript/auto",test:/\.(sa|sc|c)ss$/i,use:[devMode ?"style-loader" :MiniCssExtractPlugin.loader,"css-loader","postcss-loader","sass-loader",],},],},plugins:[].concat(devMode ?[] :[newMiniCssExtractPlugin()]),};

Disable URL resolving using the/* webpackIgnore: true */ comment

/* webpackIgnore: true */@import url(./basic.css);@import/* webpackIgnore: true */ url(./imported.css);.class {/* Disabled url handling for the all urls in the 'background' declaration */color: red;/* webpackIgnore: true */background:url("./url/img.png"),url("./url/img.png");}.class {/* Disabled url handling for the first url in the 'background' declaration */color: red;background:/* webpackIgnore: true */url("./url/img.png"),url("./url/img.png");}.class {/* Disabled url handling for the second url in the 'background' declaration */color: red;background:url("./url/img.png"),/* webpackIgnore: true */url("./url/img.png");}/* prettier-ignore */.class {/* Disabled url handling for the second url in the 'background' declaration */color: red;background:url("./url/img.png"),/* webpackIgnore: true */url("./url/img.png");}/* prettier-ignore */.class {/* Disabled url handling for third and sixth urls in the 'background-image' declaration */background-image:image-set(    url(./url/img.png)2x,    url(./url/img.png)3x,/* webpackIgnore:  true */ url(./url/img.png)4x,    url(./url/img.png)5x,    url(./url/img.png)6x,/* webpackIgnore:  true */    url(./url/img.png)7x  );}

Assets

module.exports={module:{rules:[{test:/\.css$/i,use:["style-loader","css-loader"],},{test:/\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,// More information here https://webpack.js.org/guides/asset-modules/type:"asset",},],},};

Extract

Pure CSS, CSS Modules and PostCSS

module.exports={module:{rules:[{// For pure CSS - /\.css$/i,// For Sass/SCSS - /\.((c|sa|sc)ss)$/i,// For Less - /\.((c|le)ss)$/i,test:/\.((c|sa|sc)ss)$/i,use:["style-loader",{loader:"css-loader",options:{// Run `postcss-loader` on each CSS `@import` and CSS modules/ICSS imports, do not forget that `sass-loader` compile non CSS `@import`'s into a single file// If you need run `sass-loader` and `postcss-loader` on each CSS `@import` please set it to `2`importLoaders:1,},},{loader:"postcss-loader",options:{plugins:()=>[postcssPresetEnv({stage:0})]},},// Can be `less-loader`{loader:"sass-loader",},],},// For webpack v5{test:/\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,// More information here https://webpack.js.org/guides/asset-modules/type:"asset",},],},};

Resolve unresolved URLs using an alias

.class {background:url(/assets/unresolved/img.png);}

module.exports={module:{rules:[{test:/\.css$/i,use:["style-loader","css-loader"],},],},resolve:{alias:{"/assets/unresolved/img.png":path.resolve(__dirname,"assets/real-path-to-img/img.png",),},},};

Named export with custom export names

module.exports={module:{rules:[{test:/\.css$/i,loader:"css-loader",options:{modules:{namedExport:true,exportLocalsConvention:function(name){returnname.replace(/-/g,"_");},},},},],},};

SeparatingInteroperable CSS-only andCSS Module features

module.exports={module:{rules:[// ...// --------// SCSS ALL EXCEPT MODULES{test:/\.scss$/i,exclude:/\.module\.scss$/i,use:[{loader:"style-loader",},{loader:"css-loader",options:{importLoaders:1,modules:{mode:"icss",},},},{loader:"sass-loader",},],},// --------// SCSS MODULES{test:/\.module\.scss$/i,use:[{loader:"style-loader",},{loader:"css-loader",options:{importLoaders:1,modules:{mode:"local",},},},{loader:"sass-loader",},],},// --------// ...],},};

$colorBackground:red;:export {colorBackgroundCanvas:$colorBackground;}

@import"variables.scss";.componentClass {background-color:$colorBackground;}

import*assvarsfrom"variables.scss";import*asstylesfrom"Component.module.scss";// Render DOM with CSS modules class name// <div className={styles.componentClass}>//   <canvas ref={mountsCanvas}/>// </div>// Somewhere in JavaScript canvas drawing code use the variable directly// const ctx = mountsCanvas.current.getContext('2d',{alpha: false});ctx.fillStyle=`${svars.colorBackgroundCanvas}`;

Contributing

License