Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

import .scss build to js, the exported mapping is inconsistent with the usage【Urgent!!】 #18332

Closed
zaohuayudie opened this issue Apr 17, 2024 · 0 comments

Comments

@zaohuayudie
Copy link

Bug report

What is the current behavior?

  1. scss导入方式
import Style from 'index.scss';

index.scss
.tCard {...}

jsx use class
className={Style.tCard}

  1. rspack.config.js 的module 配置
module: {
    generator: {
      'css/auto': {
        exportsOnly: false,
        exportsConvention: 'camel-case',
        localIdentName: '[local]',
      },
      css: {
        exportsOnly: false,
        exportsConvention: 'camel-case',
        localIdentName: '[local]',
      },
      'css/module': {
        exportsOnly: false,
        exportsConvention: 'camel-case',
        localIdentName: '[local]',
      },
    },
    rules: [
      {
        test: /\.(j|t)s$/,
        exclude: [/[\\/]node_modules[\\/]/],
        loader: 'builtin:swc-loader',
        options: {
          sourceMap: false,
          jsc: {
            parser: {
              syntax: 'typescript',
            },
          },
        },
        type: 'javascript/auto',
        // sideEffects: false, // esm导入要加这个才能解决
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: 'less-loader',
            options: {
              lessOptions: { javascriptEnabled: true },
            },
          },
        ],
        type: 'css/auto', // set to 'css/auto' if you want to support '*.module.less' as CSS Module, otherwise set type to 'css'
      },
      {
        test: /\.(sass|scss)$/,
        use: [
          {
            loader: 'sass-loader',
            options: {
              implementation: require('dart-sass'),
              outputStyle: 'expanded',
            },
          },
        ],
        type: 'css/module', 
      },
      {
        test: /\.css$/i,
        use: [
          {
            loader: 'css-loader',
          },
        ],
        type: 'css/auto',
      },
      {
        test: /\.(jpe?g|png|gif|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
        type: 'asset',
      },
      {
        test: /\.(jsx?|tsx?)$/,
        use: [
          {
            loader: 'builtin:swc-loader',
            options: {
              sourceMap: false,
              jsc: {
                parser: {
                  syntax: 'typescript',
                  tsx: true,
                },
                transform: {
                  react: {
                    runtime: 'automatic',
                    development: isDev,
                    refresh: isDev,
                  },
                },
              },
              env: {
                targets: [
                  'chrome >= 87',
                  'edge >= 88',
                  'firefox >= 78',
                  'safari >= 14',
                ],
              },
            },
          },
        ],
      },
    ],
  },
  1. 出现class引用多了default,实际导出并没有
image

编译产物片段,导出为exports,并没有导出default。

55978: function (e, t, r) {
        'use strict';
        r.r(
          (e.exports = {
            'b-card__title': 'b-card__title',
            bCardTitle: 'b-card__title',
            inProgress: 'inProgress',
            infoBox: 'infoBox',
            infoBoxItem: 'infoBoxItem',
            pdf: 'pdf',
            't-card': 't-card',
            tCard: 't-card',
            't-card__body': 't-card__body',
            tCardBody: 't-card__body',
            't-card__header': 't-card__header',
            tCardHeader: 't-card__header',
            't-card__header-wrapper': 't-card__header-wrapper',
            tCardHeaderWrapper: 't-card__header-wrapper',
            't-card__title': 't-card__title',
            tCardTitle: 't-card__title',
          }),
        );
      },
image

If the current behavior is a bug, please provide the steps to reproduce.

What is the expected behavior?
import的scss文件,编译后的能正常使用构建的css。
导出对应map与实际使用一致。

加急!!!!

Other relevant information:
rspack version: 0.6.1
Node.js version: v18.17.1
Operating System: Mac M2
Additional tools:

@zaohuayudie zaohuayudie changed the title import .scss file 编译后产物export不一致【加急!!!】 import .scss file 编译后产物export mapKey和使用访问不一致【加急!!!】 Apr 17, 2024
@zaohuayudie zaohuayudie changed the title import .scss file 编译后产物export mapKey和使用访问不一致【加急!!!】 import .scss build to js, the exported mapping is inconsistent with the usage【Urgent!!】 Apr 17, 2024
@webpack webpack locked and limited conversation to collaborators Apr 17, 2024
@alexander-akait alexander-akait converted this issue into discussion #18334 Apr 17, 2024

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant