在Create React App项目中如何用LESS变量定制Semantic-UI React主题？

Hey there! The issue you’re hitting is that using the pre-compiled semantic-ui-css package doesn’t let you tweak the underlying LESS variables. To customize things like the main font, you’ll need to set up Semantic UI’s LESS source directly in your project. Here’s a step-by-step guide to make that happen:

Step 1: Remove the Pre-Compiled CSS #

First, get rid of the existing CSS import since we’ll be compiling our own from LESS. In your index.js, delete this line:

import 'semantic-ui-css/semantic.min.css'

Then uninstall the package:

npm uninstall semantic-ui-css

Step 2: Install Required Dependencies #

We’ll use semantic-ui-less for the LESS source, and craco (Create React App Configuration Override) to add LESS support without ejecting your CRA project:

npm install semantic-ui-less @craco/craco craco-less

Step 3: Update Your Package.json Scripts #

Replace the default react-scripts commands with craco in your package.json:

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

Step 4: Set Up Craco Configuration #

Create a craco.config.js file in your project root to enable LESS processing:

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

Step 5: Create Your Custom Semantic UI Theme #

1. Create a folder structure in your src directory: src/semantic-ui/themes/my-theme (replace my-theme with whatever name you want).
2. Copy the contents of node_modules/semantic-ui-less/themes/default into your new my-theme folder. This gives you all the default variables to override.
3. Open src/semantic-ui/themes/my-theme/globals/site.variables and find the @fontFamily variable. Change it to your desired font. For example:

   @fontFamily: 'Roboto', sans-serif;
   @fontFamilyBase: @fontFamily; // Ensures base elements use the same font
   

   If you’re using a Google Font, add the link to your public/index.html:

   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
   

Step 6: Create a Root LESS File #

Create src/semantic-ui/semantic.less to import the Semantic UI source and point it to your custom theme:

// Set the path to your themes folder
@themePath: '../src/semantic-ui/themes';
// Specify your custom theme name
@siteTheme: 'my-theme';

// Import the full Semantic UI LESS source
@import '~semantic-ui-less/semantic.less';

Step 7: Import Your Custom LESS File #

In index.js, import your new compiled LESS file instead of the old CSS:

import './semantic-ui/semantic.less';

Optional: Ejecting (Not Recommended) #

If you prefer to eject your CRA project instead of using craco, after ejecting you’d need to configure webpack.config.js to handle LESS files by adding less-loader and updating module rules. But ejecting is irreversible, so craco is the safer, more maintainable option.

That’s it! Now when you run npm start, your app will use the custom font (or any other LESS variables you’ve modified) from your Semantic UI theme. You can tweak other variables in the site.variables or component-specific variable files to further customize the look.

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