NX工作空间中跨包导出SCSS变量的实现求助

解决方案步骤 #

1. 统一lib1的SCSS导出入口 #

在lib1的源码目录下创建专门的样式入口文件，比如libs/lib1/src/styles/index.scss，将所有需要对外暴露的SCSS变量、混合宏、基础样式集中在这里：

// libs/lib1/src/styles/index.scss
$primary-color: #2563eb;
$secondary-color: #4f46e5;

@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

2. 配置app1的样式路径别名 #

Next.js基于Webpack运行，需要在app1的next.config.js中添加路径别名，让Webpack能识别lib1的样式路径：

// apps/app1/next.config.js
const path = require('path');

module.exports = {
  webpack: (config) => {
    config.resolve.alias['@lib1/styles'] = path.resolve(__dirname, '../../libs/lib1/src/styles');
    return config;
  },
};

3. 在app1中直接导入使用 #

在app1的SCSS文件或组件样式中，通过配置好的别名导入lib1的样式入口，即可使用其中的变量和混合宏：

// apps/app1/src/styles/global.scss
@import '@lib1/styles/index.scss';

.header {
  background-color: $primary-color;
  @include flex-center;
}

补充说明 #

• 如果lib1有多个样式模块，可在入口文件index.scss中统一导入，避免app1多次引用不同路径
• 确保NX工作空间已安装sass依赖，可通过npm install sass --save-dev完成安装

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