Specifying the Default Styling Solution

The styling key lets you specify the main styling solution of the project. New stylesheets created by Codux will use the relevant file extension for the solution by default.

Property: solution (string) 

The solution property specifies the default styling solution of the project. The default is "css".
The following are the available options for this configuration:
  • "css"
  • "sass"
  • "scss"
  • "css modules"
  • "sass modules"
  • "scss modules"
  • "stylable"
Here's a sample configuration with this key set:
1
2
3
4
5
6
7
{  
    "$schema": "https://wixplosives.github.io/codux-config-schema/codux.config.schema.json",
    …
    "styling": {
        "solution": "scss modules"
    }
}
Important!
Codux selects a component's styling file based on its name. In the absence of a specified styling solution, Codux will use any styling file that shares the component's name, irrespective of its extension. However, Codux prioritizes non-CSS styling files. For instance, given a component foo.tsx with foo.css and foo.scss as styling files, Codux defaults to foo.scss. If a styling solution (like "scss") is defined, Codux will specifically search for a .scss file matching the component's name.
IN THIS ARTICLE
Previous article
Next article