ERROR: [plugin: esbuild-css-modules] Undefined mixin.

[wh1teYu]

Describe the bug

通过ice-cli 搭建项目后，使用scss来引入mixin，启动，打包报错
Server compiled with errors. 10:11:47
EntryPoints: {"index":"/Users/xxx/工作/cairh-mall-repo/projects/mall-pc/.ice/entry.server.ts"}
Build failed with 1 error:
src/pages/index.tsx:4:19: ERROR: [plugin: esbuild-css-modules] Undefined mixin.
╷
60 │ @include flex-center();
│ ^^^^^^^^^^^^^^^^^^^^^^
╵
src/pages/index.module.scss 60:5 root stylesheet

run DEBUG_TAG=server-compiler npm run start to view error details 10:11:47

ERROR Server compile error: Build failed with 1 error: 10:11:47
src/pages/index.tsx:4:19: ERROR: [plugin: esbuild-css-modules] Undefined mixin.
╷
60 │ @include flex-center();
│ ^^^^^^^^^^^^^^^^^^^^^^
╵
src/pages/index.module.scss 60:5 root stylesheet

src/pages/index.tsx:4:19: ERROR: [plugin: esbuild-css-modules] Undefined mixin.
╷
60 │ @include flex-center();

Expected behavior

希望能正常使用mixin写法

Actual behavior

app.ts
import './styles/index.scss' 这里引入了
@import './mixin';
@import './variable';
@import './reset';

Version of ice.js

@ice/app 3.49

Content of build.json or ice.config.mts

import { defineConfig } from '@ice/app'
import { modifyLoader } from '@ice/webpack-modify'
import antd from '@ice/plugin-antd'
import Unocss from '@ice/plugin-unocss'

// The project config, see https://v3.ice.work/docs/guide/basic/config
const minify = process.env.NODE_ENV === 'production' ? 'swc' : false
export default defineConfig(() => ({
  // Set your configs here.
  minify,
  server: {
    onDemand: false,
    format: 'esm',
  },
  publicPath: '/mall-view-pc/',
  outputDir: 'mall-view-pc',
  plugins: [
    Unocss(), // 原子化
    antd({
      importStyle: true,
    }),
  ],
  webpack: (webpackConfig) => {
    let modifiedConfig: any = webpackConfig
    modifiedConfig = modifyLoader(modifiedConfig, {
      rule: '.scss',
      loader: 'sass-loader',
      options: () => ({
        additionalData: `@import "./src/styles/_variable.scss";
                      @import "./src/styles/_mixin.scss";`,
      }),
    })

    return modifiedConfig
  },
}))

Additional context

定义层 @mixin flex-center($direction: row) {
display: flex;
flex-direction: $direction;
justify-content: center;
align-items: center;
}

使用层
.footer {
background-color: #FFF;
font-size: 12px;
color: #676767;
@include flex-center();
.logo1 {
height: 40px;
}
.desc {
display: flex;
align-items: center;
}
a {
display: flex;
align-items: center;
}
}

[ClarkXia]

服务端编译目前仅简单处理了 css modules 的生成规则，如果临时有 mixin 的处理，推荐不使用 css modules 形式引入的方式绕过。

css modules 在服务端编译 mixin 报错的问题我们修复下