Skip to content
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

[Bug]: Migrate vue3 [vue-cli] to Rsbuild 【stylus】 #3971

Closed
runkobe24 opened this issue Nov 14, 2024 · 2 comments · Fixed by #3972
Closed

[Bug]: Migrate vue3 [vue-cli] to Rsbuild 【stylus】 #3971

runkobe24 opened this issue Nov 14, 2024 · 2 comments · Fixed by #3972
Labels
🐞 bug Something isn't working

Comments

@runkobe24
Copy link

Version

System:
OS: Windows 11 10.0.22621
CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700
Memory: 11.49 GB / 31.68 GB
Binaries:
Node: 18.20.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Chromium (127.0.2651.74)
Internet Explorer: 11.0.22621.3527

Details

This is my current 【rsbuild.config.ts】 configuration:

import { defineConfig } from '@rsbuild/core';
const path = require('path')
import { pluginVue } from '@rsbuild/plugin-vue';
import { pluginStylus } from '@rsbuild/plugin-stylus';
const { VueLoaderPlugin } = require("vue-loader");
// 开发目录
const devPath = path.resolve(__dirname, 'src')

export default defineConfig({
  dev: {
    assetPrefix: './'
  },
  
  html: {
    template: './public/index.html',
  },

  source: {
    // 指定入口文件
    entry: {
      index: './src/main.ts',
    },

    alias: {
      // '@': './src',
      antd: 'ant-design-vue'
    },
  },

  plugins: [
    pluginVue(),
    pluginStylus({
      stylusOptions: {
        import: './src/lib/stylus/vars.styl'
      }
    })
  ],
  
  tools: {
    rspack: {
      plugins: [new VueLoaderPlugin()],
    },
  },
});

Reproduce link

https://codesandbox.io/p/devbox/exciting-mopsa-7jhpsw?file=%2Frsbuild.config.ts%3A1%2C1-46%2C1

Reproduce Steps

yarn dev

@runkobe24 runkobe24 added the 🐞 bug Something isn't working label Nov 14, 2024
@runkobe24
Copy link
Author

If I delete stylusOptions, an error will be reported:
TypeError: expected rgba or hsla, but got ident:$primary-color;

If I don't delete it, this error will appear again:
Module build failed:
╰─▶ × Error: RspackResolver(NotFound("s"))

@chenjiahan
Copy link
Member

There is a type issue in @rsbuild/plugin-stylus, we will fix the type with #3972

The correct usage is:

pluginStylus({
  stylusOptions: {
    import: [path.join(__dirname, "./src/lib/stylus/vars.styl")],
  },
})

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐞 bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants