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 报错的问题我们修复下