W moim projekcie React, jeśli używam nieistniejącej nazwy klasy z pliku modułów css,

 // mycss.modules.scss

.thing { color: red }

// index.jsx

import styles from mycss.modules.scss

<div className={styles.otherThing}>Some div</div>

// Browser would return:

<div>Some div</div>

Po cichu zawodzi, nie dając mi znać, że ta klasa nie istnieje. Jak mogę sprawdzić, czy ta nazwa klasy istnieje, czy nie, i zgłosić błąd. Byłoby wspaniale, gdyby pojawił się błąd podczas kompilacji podczas zapisywania pliku.

2
Edvards Niedre 3 kwiecień 2020, 01:25

5 odpowiedzi

Najlepsza odpowiedź

Jeśli jesteś otwarty na rozwiązanie maszynopisowe, znalazłem dla Ciebie jedną wtyczkę TS.

typescript-plugin-css-modules

Może wypełnić obiekt styles informacjami o typie dostępnych kluczy.

Nie musisz przełączać całego projektu na maszynopis, możesz dodać dyrektywę // @ts-check na początku tego pliku, aby włączyć sprawdzanie czasu projektowania silnika TS.

2
hackape 7 kwiecień 2020, 02:53

Dodaj tę funkcję do góry:

// index.jsx
import styles from mycss.modules.scss

function strictStyles (clsName){
  if(styles[clsName]){
    return styles[clsName]
  }else{
    throw "CSS class doesn't exist";
  }
}

...
<div className={strictStyles(otherThing)}>Some div</div>
...
0
Mhmdrz_A 5 kwiecień 2020, 09:17

UWAGA: To rozwiązanie nie wymaga zmiany żadnego kodu, wystarczy dodać moduł ładujący i powinien działać po wyjęciu z pudełka. Zwróć uwagę na ostrzeżenie dotyczące kompilacji produkcyjnych na końcu lub sprawdź źródło, aby uzyskać pełne instrukcje na Github.

Stworzyłem program ładujący Webpack, który współpracuje z modułami ładującymi CSS / LESS / Other CSS.

Pełne źródło i plik readme można znaleźć w GitHub.

Dla tych, którzy chcą tylko dodać moduł ładujący do swojego projektu, można go użyć w następujący sposób:

Dodaj gdzieś ten plik źródłowy modułu ładującego Webpack, np. /webpack/loaders/css-module-proxy.js

/**
 * A CSS/LESS/Style module loader that prepends a proxy in non-production builds.
 *
 * The proxy checks if the loaded style module actually contains the style we are trying to fetch.
 * If it doesn't exist (its accessor returns undefined), we crash on debug (non-production) builds!
 *
 * Inspired by https://github.com/royriojas/css-local-loader
 */
module.exports = function cssLocalLoader(source, map) {
    this.cacheable();
    if (process.env.NODE_ENV !== "production") {
        // noMatch:
        // Makes sure that any access prefixed with underscore are filtered out
        // otherwise it will crash at runtime when Webpack is probing the locals export.
        // toJsonMatch:
        // Makes sure that toJSON access on the locals object gets proxied to the correct
        // toJSON function.
        const requireWrapper = `
            // If the access matches this regexp, skip it
            const oldLocals = exports.locals;
            const noMatch = /^[_]+/;
            const toJsonMatch = /^toJSON$/;
            const proxy = new Proxy(oldLocals, {
              get: function(target, name) {
                if (noMatch.test(name)) {
                    return undefined;
                }
                if (toJsonMatch.test(name)) {
                    return oldLocals.toJSON;
                }
                const clz = target[name];
                if (clz === undefined) {
                    throw new Error("Error: LESS / CSS class named \\"" + name + "\\" does not exist");
                }
                return clz;
              }
            });
            exports.locals = proxy;
        `;
        const newSource = `${source}\n\n${requireWrapper}`;
        this.callback(null, newSource, map);
    } else {
        this.callback(null, source, map);
    }
};

A potem użyj go z konfiguracji webpacka, przykład poniżej jest dla MNIEJ:

{
    test: /\.module\.less$/,
    use: [
        { loader: path.resolve("webpack/loaders/css-module-proxy.js") },
        {
            loader: "css-loader",
            options: {
                modules: true,
                importLoaders: 1,
                localIdentName: "[name]__[local]__[hash:base64:5]",
            },
        },
        { loader: "less-loader" },
    ],
},

Nie zapomnij o utworzeniu kodu wydania za pomocą NODE_ENV=production, bo może się on zawiesić, gdy użytkownik odwiedzi Twoją witrynę ...

0
Erik Zivkovic 24 maj 2020, 11:46

O ile nie chcesz wysłać żądania ściągnięcia, aby dodać coś w rodzaju opcji trybu ścisłego do samego programu ładującego webpack, nie sądzę, że wiele można zrobić, ponieważ jest to tylko obiekt podstawowy. Prostą alternatywą jest po prostu zrobienie styles.styleName.toString(), w ten sposób, jeśli styleName jest niezdefiniowane, spowoduje to zgłoszenie błędu.

2
Batzz 6 kwiecień 2020, 21:47

Właściwie jest to możliwe w kodzie javascript. Ale myślę, że sprawdzenie istnienia className nie jest dobrym pomysłem.

document.styleSheets[].rules[].selectorText

Oryginalny link Jak określić, czy klasa css istnieje z JavaScriptem?

0
Khayankhyarvaa Turmandakh 2 kwiecień 2020, 22:37