如何将多个Sass文件打包为单个Sass文件？Angular组件库主题适配

Hey there! I’ve worked with ng-packagr on component libraries with theming support before, so let’s walk through exactly how to set this up—so users can override your default colors, while bundling your Sass assets properly for easy consumption.

1. Organize Your Sass File Structure #

First, structure your theme-related files to keep things clean and user-friendly. Add a theme directory in your library’s source folder:

projects/my-lib/ngx-components/src/
├── theme/
│   ├── _variables.scss       # Defines overridable default variables
│   ├── _default-theme.scss   # Applies variables to component styles
│   └── index.scss            # Entry point for users to import
└── lib/
    └── navbar/
        ├── navbar.component.scss
        └── ...

• _variables.scss: Use the !default flag on all variables so users can override them. Example:

  // _variables.scss
  $navbar-bg: #ffffff !default;
  $navbar-text-color: #2d3748 !default;
  $navbar-hover-bg: #edf2f7 !default;
  

• _default-theme.scss: Import variables and define base styles (or reference component styles here if you want a single bundled theme):

  // _default-theme.scss
  @import 'variables';
  // Optional: Import component styles to bundle them together
  @import '../lib/navbar/navbar.component';
  

• index.scss: Export all theme assets for one-line user imports:

  // index.scss
  @import 'default-theme';
  

2. Configure ng-packagr to Bundle Sass Files #

Update your library’s ng-package.json to include theme assets and make variables accessible to component styles:

{
  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../../dist/my-lib/ngx-components",
  "lib": {
    "entryFile": "src/public-api.ts",
    "styleIncludePaths": [
      "./src/theme" // Lets component SCSS reference variables without long paths
    ]
  },
  "assets": [
    {
      "glob": "**/*.scss",
      "input": "./src/theme",
      "output": "./theme" // Places theme files in the bundled library's /theme folder
    }
  ]
}

• styleIncludePaths ensures your component SCSS can import variables directly (no ../../theme/ nonsense).
• The assets config tells ng-packagr to copy all .scss files from your theme directory into the final bundled library.

3. Use Theme Variables in Component Styles #

In your component’s SCSS (like navbar.component.scss), reference the theme variables directly:

// navbar.component.scss
@import 'variables';

.navbar {
  background-color: $navbar-bg;
  color: $navbar-text-color;
  padding: 1rem;
  transition: background-color 0.2s;

  &:hover {
    background-color: $navbar-hover-bg;
  }
}

4. Let Users Override the Theme #

Once your library is built and published, users can override your defaults by defining their own variables before importing your theme:

// User's global styles.scss
// First, override the variables
$navbar-bg: #2b6cb0;
$navbar-text-color: #ffffff;
$navbar-hover-bg: #2c5282;

// Then import your library's theme
@import '@my-lib/ngx-components/theme/index';

This applies custom colors to all your library components that use these variables. If users only want the navbar component, they can still import its style directly—overridden variables will still apply:

// User's component-specific or global styles
$navbar-bg: #2b6cb0;
@import '@my-lib/ngx-components/lib/navbar/navbar.component';

Bonus: Optional CSS Bundle (For Non-Sass Users) #

If you want to offer a pre-compiled CSS file, add a build step to compile index.scss to CSS and include it in your library assets. But keep the Sass files accessible—they’re critical for theming flexibility.

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