css-loader

https://github.com/webpack-contrib/css-loader



    {
        test: /\.((s*)css|sass)$/,
        // test: /\.(css|scss|sass)$/,
        use: ExtractTextPlugin.extract({
            use: [
                {
                    loader: "css-loader",
                    options: {
                        url: false,
                        // url: true,
                        minimize: true,
                        sourceMap: true,
                        modules: true,
                        importLoaders: 1,
                        localIdentName: "[name]__[local]___[hash:base64:8]",
                        // localIdentName: "[local]",
                    }
                },
                {
                    loader: "sass-loader",
                    options: {
                        sourceMap: true,
                    }
                }
            ],
            fallback: "style-loader",
            // allChunks: true,
            // publicPath: "./public",// not work ant all
        }),
    },

className

.class

config

@charset "UTf-8";

/* test.css */


/* #region */

:root {
    --cololr: #000;
    --default-cololr: #fff;
    --new-cololr: #0f0;
}

[data-class="links"] {
    color: white;
    background-color: DodgerBlue;
    padding: 20px;
    text-align: center;
    margin: 10px;
}

img {
    border: 1px solid red;
}

.class-test {
    color: red;
}


/* #endregion */


@charset "UTf-8";

/* test.css */


/* #region */

:root {
    --cololr: #000;
    --default-cololr: #fff;
    --new-cololr: #0f0;
}

[data-class="links"] {
    color: white;
    background-color: DodgerBlue;
    padding: 20px;
    text-align: center;
    margin: 10px;
}

img {
    border: 1px solid red;
}

.class-test {
    color: red;
}


/* #endregion */

vs code & css auto prefix


{
    "window.zoomLevel": 0,
    "files.exclude": {
        "**/.git": true,
        "**/.DS_Store": true,
        "jspm_packages": true,
        "node_modules": true,
        "**/.zip": true,
        "**/.sh": true
    },
    "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true
    },
    "files.watcherExclude": {
        "**/.git/objects/**": true,
        "**/.git/subtree-cache/**": true,
        "**/node_modules/*/**": true
    },
    "editor.formatOnSave": false,
    "editor.renderWhitespace": "all",
    "editor.fontSize": 16,
    "editor.tabSize": 4,
    "editor.multiCursorModifier": "alt",
    "editor.wordWrap": "on",
    "editor.insertSpaces": true,
    "files.encoding": "utf8",
    "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe",
    "[typescript]": {
        "editor.formatOnSave": true,
        "editor.formatOnPaste": true
    },
    "[markdown]": {
        "editor.formatOnSave": true,
        "editor.renderWhitespace": "all",
        "editor.acceptSuggestionOnEnter": "off"
    },
    "files.associations": {
        "*.jsx": "javascriptreact",
        "*.js": "javascriptreact"
    },
    "editor.snippetSuggestions": "top",
    "jsDocCompletion.enabled": true,
    // When enabled, typing /** triggers documentation automatically.
    "docthis.automaticForBlockComments": true,
    // When enabled, type information is added to comment tags.
    "docthis.includeTypes": true,
    // When enabled, memberOf information is added to comment tags on class members.
    "docthis.includeMemberOfOnClassMembers": true,
    // When enabled, memberOf information is added to comment tags on interface members.
    "docthis.includeMemberOfOnInterfaceMembers": true,
    // When enabled, JSDoc comments for functions and methods will include @description.
    "docthis.includeDescriptionTag": true,
    // When enabled, hungarian notation will be used as a type hint.
    "docthis.enableHungarianNotationEvaluation": true,
    // When enabled, will use names of params & methods as type hints.
    "docthis.inferTypesFromNames": true,
    // When enabled, will add the @author tag.
    "docthis.includeAuthorTag": true,
    // When docthis.includeAuthorTag is enabled, will add @author tag with this value.
    "docthis.authorName": "xgqfrms",
    // HTML
    "html.format.extraLiners": "/html",
    "html.format.enable": false,
    "html.format.contentUnformatted": "body, div, section, script, pre,code,textarea",
    "explorer.confirmDragAndDrop": false,
    "git.ignoreMissingGitWarning": true,
    "explorer.confirmDelete": false,
    // The list of attributes to add support for, and what prefixes each one should receive.
    "css-auto-prefix.prefixes": {
        "transform": [
            "webkit",
            "moz",
            "ms",
            "o"
        ],
        "transition": [
            "webkit",
            "moz",
            "ms",
            "o"
        ],
        "border-radius": [
            "webkit",
            "moz",
            "ms",
            "o"
        ],
        "animation": [
            "webkit"
        ],
        "box-reflect": [
            "webkit"
        ],
        "filter": [
            "webkit"
        ],
        "font-feature-settings": [
            "webkit",
            "moz"
        ],
        "backface-visibility": [
            "webkit"
        ],
        "box-decoration-break": [
            "webkit"
        ],
        "hyphens": [
            "webkit",
            "moz",
            "ms"
        ],
        "marquee-direction": [
            "webkit"
        ],
        "marquee-play-count": [
            "webkit"
        ],
        "marquee-speed": [
            "webkit"
        ],
        "marquee-style": [
            "webkit"
        ],
        "text-combine-upright": [
            "webkit",
            "moz",
            "ms"
        ],
        "text-decoration-color": [
            "moz"
        ],
        "text-decoration-line": [
            "moz"
        ],
        "text-decoration-style": [
            "moz"
        ],
        "text-orientation": [
            "webkit"
        ],
        "writing-mode": [
            "webkit",
            "ms"
        ]
    }
}