如何在Yarn 2+ Plug-n-Play环境中导入Node模块的样式表？

核心原因 #

Yarn Plug-n-Play（PnP）的模块解析逻辑与传统node-modules模式存在差异：

• Webpack的~前缀是专门指向node_modules目录的语法，PnP环境下不识别该前缀，且无需使用
• Syncfusion部分包内部的样式导入采用相对路径，未适配PnP的模块解析规则

解决方案 #

1. 移除样式导入的~前缀 #

修改src/styles/grid.scss中的Syncfusion样式导入语句，删除开头的~：

@import 'src/styles/variables';
@import 'src/styles/mixins';
@import '@syncfusion/ej2-base/styles/material.css';
@import '@syncfusion/ej2-buttons/styles/material.css';
@import '@syncfusion/ej2-navigations/styles/material.css';
@import '@syncfusion/ej2-popups/styles/material.css';
@import '@syncfusion/ej2-react-grids/styles/material.css';

Yarn PnP会自动处理包内文件的路径解析，无需额外前缀标记。

2. 修复Syncfusion内部样式的依赖解析问题 #

针对报错中ej2-icons/styles/material.scss找不到的问题，可选择以下任一方案：

方案A：通过Yarn packageExtensions补全依赖关联

在项目根目录的package.json中添加配置，确保@syncfusion/ej2-base能正确关联到依赖的@syncfusion/ej2-icons：

"packageExtensions": {
  "@syncfusion/ej2-base@*": {
    "dependencies": {
      "@syncfusion/ej2-icons": "*"
    }
  }
}

添加后执行yarn install更新依赖配置。

方案B：配置Sass的包含路径

在项目根目录创建sass.config.js文件，指定Sass的额外解析路径：

const { resolve } = require('path');

module.exports = {
  includePaths: [
    resolve(__dirname, './.yarn/cache/@syncfusion-ej2-icons-npm-*/node_modules'),
    // 其他Syncfusion包若有类似问题，可添加对应路径
  ]
};

react-scripts会自动识别该配置，帮助Sass找到内部依赖的样式文件。

3. 配置Yarn PnP支持样式文件类型 #

在.yarnrc.yml中添加以下配置，让Yarn PnP能正确识别.scss和.css文件：

plugnplayExtensions:
  - ".scss"
  - ".css"

验证 #

执行以下命令测试构建：

yarn cache clean
yarn install
yarn build

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