如何在基于create-react-library的React组件库中独立使用并导出SCSS？

Hey there! Great question—using SCSS in a create-react-library-based component library is totally doable, and I’ll walk you through exactly how to set it up without overcomplicating things. Let’s dive in:

Step 1: Install Required Dependencies #

create-react-library uses Rollup under the hood (not Webpack) for bundling, so you’ll need two packages to handle SCSS:

• rollup-plugin-scss: Integrates SCSS processing into Rollup
• sass: The modern Dart Sass compiler (recommended over the deprecated node-sass)

Install them via npm or yarn:

npm install rollup-plugin-scss sass --save-dev
# OR
yarn add rollup-plugin-scss sass -D

Step 2: Configure Rollup to Process SCSS #

Open your project’s rollup.config.js file (root directory) and update it to include the SCSS plugin:

1. Import the plugin at the top of the file:

import scss from 'rollup-plugin-scss';

2. Add the plugin to the plugins array. You have two flexible options:
   • Option 1: Inline CSS into your component bundle (ideal for small libraries where users don’t need to override styles):

     plugins: [
       // ... keep your existing plugins (babel, peer-deps-external, etc.)
       scss() // This compiles and inlines CSS directly into the JS bundle
     ]
     

   • Option 2: Output a standalone CSS file (better for larger libraries, lets users import styles separately for customization):

     plugins: [
       // ... existing plugins
       scss({
         output: 'dist/styles.css', // Path where compiled CSS will save
         failOnError: true // Optional: throws an error if SCSS has syntax issues
       })
     ]
     

Step 3: Use SCSS in Your Components #

Create SCSS files alongside your components and import them directly into your React component files. For example:

1. Create Button.scss:

.button {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: none;
  background-color: #007bff;
  color: white;

  &:hover {
    background-color: #0056b3;
    cursor: pointer;
  }
}

2. Import it into Button.jsx:

import React from 'react';
import './Button.scss';

const Button = ({ children }) => {
  return <button className="button">{children}</button>;
};

export default Button;

Step 4: Update package.json (Optional but Recommended) #

To make it easier for users of your library to find and import styles, add a style field to your package.json pointing to your compiled CSS file:

{
  "name": "your-library-name",
  "version": "1.0.0",
  "style": "dist/styles.css",
  // ... other existing fields
}

Step 5: Build and Test Your Library #

Run the build command to compile your components and SCSS:

npm run build
# OR
yarn build

You can test your library locally by linking it to a test React project, or publish it to npm. Users will import your components and styles like this:

import Button from 'your-library-name';
import 'your-library-name/dist/styles.css'; // Only needed if you chose the standalone CSS option

If you run into snags with path issues, compilation errors, or style overrides, feel free to follow up—I’m happy to help troubleshoot!

内容的提问来源于stack exchange，提问作者Hernan Jesus Diaz Yarbi