如何在Visual Studio项目中不依赖React与Node编译使用JSS？

Absolutely! You can absolutely use JSS or other CSS-in-JS libraries without React or Node.js compilation in your Visual Studio project—here are a few practical solutions to get you up and running:

The official JSS library provides standalone UMD builds that work directly in the browser, no Node.js required. To unlock essential features like nested selectors, unit conversion, and global styles, you’ll want to pair the core JSS build with the jss-preset-default (a bundle of common plugins).

How to set it up: #

• Download the UMD files for jss and jss-preset-default from their official repositories (save them to your Visual Studio project’s static assets folder, e.g., scripts/ or lib/).
• Add script tags to your HTML file to load these files:

<script src="./lib/jss.umd.js"></script>
<script src="./lib/jss-preset-default.umd.js"></script>

• Now you can write JSS code directly in your browser-side JavaScript:

// Initialize JSS with the default preset (loads all essential plugins)
const jss = window.jss.default;
const defaultPreset = window.jssPresetDefault.default;
jss.setup(defaultPreset);

// Define your styles as a JavaScript object
const styles = {
  primaryButton: {
    backgroundColor: '#2196F3',
    color: 'white',
    padding: '12px 24px',
    borderRadius: '4px',
    border: 'none',
    cursor: 'pointer',
    // Nested selector (works thanks to the preset)
    '&:hover': {
      backgroundColor: '#1976D2'
    }
  }
};

// Create a stylesheet and attach it to the document <head>
const styleSheet = jss.createStyleSheet(styles).attach();

// Apply the generated class name to your element
document.getElementById('myButton').classList.add(styleSheet.classes.primaryButton);

This setup gives you access to nearly all of JSS’s core features without any compilation step.

If you don’t need all of JSS’s features, consider a smaller library built specifically for browser-side use, like cxs:

• Download the UMD build of cxs and add it to your project.
• Use it with minimal boilerplate:

const cxs = window.cxs;

// Generate a class name from a style object
const buttonClass = cxs({
  backgroundColor: '#4CAF50',
  color: 'white',
  padding: '10px 20px',
  borderRadius: '4px',
  ':hover': {
    backgroundColor: '#388E3C'
  }
});

// Apply the class to your element
document.getElementById('myButton').classList.add(buttonClass);

cxs is lightweight, has built-in support for nested selectors, and works entirely in the browser.

If you want to avoid external libraries entirely, you can build a basic CSS-in-JS utility yourself. This works great for simple use cases:

function createStyledClasses(styleDefinitions) {
  let css = '';
  const classMap = {};

  // Helper to convert camelCase CSS props to kebab-case
  const toKebabCase = (str) => str.replace(/([A-Z])/g, '-$1').toLowerCase();

  // Helper to generate unique class names
  const generateUniqueClass = (baseName) => `css-${baseName}-${Math.random().toString(36).slice(2, 10)}`;

  // Process each style definition
  for (const [baseClass, styles] of Object.entries(styleDefinitions)) {
    const uniqueClass = generateUniqueClass(baseClass);
    classMap[baseClass] = uniqueClass;

    // Build CSS rules, including nested selectors
    const buildCss = (styleObj, selector = `.${uniqueClass}`) => {
      let rule = '';
      for (const [prop, value] of Object.entries(styleObj)) {
        if (typeof value === 'object') {
          // Handle nested selectors (e.g., &:hover)
          const nestedSelector = selector + prop.replace('&', selector);
          buildCss(value, nestedSelector);
        } else {
          rule += `${toKebabCase(prop)}: ${value}; `;
        }
      }
      if (rule) css += `${selector} { ${rule} }\n`;
    };

    buildCss(styles);
  }

  // Create and inject the style tag
  const styleTag = document.createElement('style');
  styleTag.textContent = css;
  document.head.appendChild(styleTag);

  return classMap;
}

// Usage example
const classes = createStyledClasses({
  dangerButton: {
    backgroundColor: '#F44336',
    color: 'white',
    padding: '8px 16px',
    borderRadius: '4px',
    '&:active': {
      transform: 'scale(0.98)'
    }
  }
});

document.getElementById('dangerButton').classList.add(classes.dangerButton);

This utility handles camelCase to kebab-case conversion, nested selectors, and unique class name generation—all without any external dependencies.

内容的提问来源于stack exchange，提问作者marco burrometo