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]: Can't resolve css file #2222

Closed
dlutwuwei opened this issue Apr 28, 2024 · 4 comments
Closed

[Bug]: Can't resolve css file #2222

dlutwuwei opened this issue Apr 28, 2024 · 4 comments
Labels
🐞 bug Something isn't working need reproduction

Comments

@dlutwuwei
Copy link

dlutwuwei commented Apr 28, 2024

Version

System:
    OS: macOS 14.2
    CPU: (8) x64 Apple M3
    Memory: 49.64 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 124.0.6367.91
    Safari: 17.2
  npmPackages:
    @rsbuild/core: ^0.6.7 => 0.6.7 
    @rsbuild/plugin-lightningcss: ^0.6.7 => 0.6.7 
    @rsbuild/plugin-react: ^0.6.7 => 0.6.7

Details

import { pluginReact } from '@rsbuild/plugin-react';
import { pluginLightningcss } from '@rsbuild/plugin-lightningcss';

export default {
  source: {
    entry: {
      app: './src/app.tsx',
    },
  },
  plugins: [pluginReact(), pluginLightningcss()],
};

the log is below:

start   Compiling...
error   Compile error: 
Failed to compile, check the errors for troubleshooting.
File: ./src/plugins/plugin-preview/device-preview.tsx
  × Resolve error: Can't resolve 'react-device-frameset/dist/styles/marvel-devices.min.css' in '/Users/wuwei/repos/lk/luckyladder/packages/client/src/plugins/plugin-preview'
   ╭─[2:1]
 2 │ import React from "react";
 3 │ import { DeviceFrameset, DeviceEmulator } from "react-device-frameset";
 4 │ import "react-device-frameset/dist/styles/marvel-devices.min.css";
   ·        ──────────────────────────────────────────────────────────
 5 │ import "react-device-frameset/dist/styles/device-selector.min.css";
 6 │ const PreviewDevice = (props)=>{
   ╰────

Reproduce link

https://codepen.io/Justineo/pen/yLbxxOR

Reproduce Steps

  1. excute npm run dev
@dlutwuwei dlutwuwei added the 🐞 bug Something isn't working label Apr 28, 2024
Copy link
Contributor

Hello @dlutwuwei. Please provide a reproduction repository or online demo. For background, see Why reproductions are required. Thanks ❤️

@chenjiahan
Copy link
Member

@dlutwuwei the reproduction does not seem to match the problem described:

image

@akmani-w
Copy link

@chenjiahan I have a same issue, Css imported from node_modules not working

if I import a css file from node_modules like this import "tui-calendar/dist/tui-calendar.css";

Rsbuild build command throws the below error

Resolve error: Can't resolve 'tui-calendar/dist/tui-calendar.css'

@chenjiahan
Copy link
Member

@akmani-w please create a new issue and provide the reproduction, thanks ❤️

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

No branches or pull requests

4 participants