Style all in one

English | 中文文档

Table of contents

• Features
• Supported languages
• Usage example
• Configuration

Features

• Variable prompt (It will also work in the vue file)
• Index variable names by value
• Jump to the variable definition
• Click CodeLens to switch variable name and variable value

Supported languages

• vue
• css/pcss/postcss
• less
• scss/sass
• stylish (Not supported for the time being, we will see the usage in the future, and we will support it if necessary)

Usage example

• Variable index

• Provide an easier way for CSS variable substitution

• Go to CSS variable's definition

Configuration

{
    // Configure the global variable
    // Support relative path, absolute path, npm package, path alias, etc.
    // Support files and directories
    // The matching order is: path alias> npm package> relative path (relative to workspace root directory)
    "style-all-in-one.global-style": [
        "@/style/",
        "./global.less",
        "@sxf/sf-theme/dist/brand.less"     // No need to write node_modules for npm packages
    ],

    // Configure the path alias used by the project
    "style-all-in-one.path-aliases": {
        "@": "src",     // `/` will be automatically added at the end of the path, you can omit it
        "@atest/style-all-in-one": "src/style-all-in-one/alias-path/"   // The directory needs to be relative to the workspace and the directory, or use an absolute path
    }
}