[Bug]: can not resolve scss variable in vue3 SFC.

[jackchoumine]

Version

deps version info:

"@rsbuild/core": "^1.0.1-rc.4",
"@rsbuild/plugin-babel": "^1.0.1-rc.4",
"@rsbuild/plugin-sass": "^1.0.1-rc.4",
"@rsbuild/plugin-vue": "^1.0.1-rc.4",
"@rsbuild/plugin-vue-jsx": "^1.0.1-rc.4",

Details

rsbuild.config.ts config:

import { defineConfig } from '@rsbuild/core'
import { pluginBabel } from '@rsbuild/plugin-babel'
import { pluginSass } from '@rsbuild/plugin-sass'
import { pluginVue } from '@rsbuild/plugin-vue'
import { pluginVueJsx } from '@rsbuild/plugin-vue-jsx'
import { URL, fileURLToPath } from 'node:url'
import AutoImport from 'unplugin-auto-import/rspack'

export default defineConfig({
  source: {
    entry: {
      index: './src/main.ts',
    },
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  html: {
    template: './index.html',
  },
  plugins: [
    pluginVue(),
    pluginSass(), // sass plugin here
    pluginVueJsx(),
    pluginBabel({
      include: /\.(?:jsx|tsx)$/,
    }),
  ],
  tools: {
    rspack: {
      plugins: [
        AutoImport({
          include: [
            /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
            /\.vue$/,
          ],
          // global imports to register
          imports: [
            // presets
            'vue',
            'vue-router',
            'vitest',
          ],
        }),
      ],
    },
    // NOTE 解决 无法解析 public 目录下的图片问题
    cssLoader: {
      url: {
        filter: (url, path) => {
          // console.log({ url, path })
          let publicPath = ''
          if (url.includes('/')) {
            const arr = url.split('/')
            publicPath = arr[1]
          }
          return !['imgs'].includes(publicPath)
        },
      },
    },
  },
})

vue3 component style part:

<style scoped lang="scss">
.init-options {
  flex: auto;
  background-color: antiquewhite;
  p {
    background-color: red;
    background-image: url('/imgs/wms-0-params.png');
  }
  .el-button {
    margin-top: 10px;
    --el-button-bg-color: var(--el-color-success);
  }
  .test-scss-var {
    /* FIXME rspack  Error: Undefined variable. */
    background-color: $bg-color;
    /* background-color: lightgreen; */
  }
}
</style>

error info:

 Module build failed:
  ╰─▶   × Error: HookWebpackError:   × Module build failed:
        │   ╰─▶   × Error: Undefined variable.

has imported scss variable in main.ts

import './assets/scss-var.scss'

./assets/scss-var.scss:

$bg-color: red;

Reproduce link

无

Reproduce Steps

无

[cobish]

Try it？ https://cli.vuejs.org/zh/guide/css.html#%E8%87%AA%E5%8A%A8%E5%8C%96%E5%AF%BC%E5%85%A5

[liyincode]

You need to import the desired Sass variables in the target component using the @use syntax. sass loading-members

component.vue

<style scoped lang="scss">
@use "@/assets/scss-var" as *;

.test-scss-var {
  background-color: $bg-color;
}
</style>

./assets/scss-var.scss

$bg-color: red;