The title really says it all, some components have their CSS included correctly and others are missing the CSS altogether. There is no difference between the working and non-working components that I can find, but each time I run the build script, the same components are missing the CSS. The CSS files are being imported normally -
import "./WeeklyTrend.css"
I'm using Vite as my bundler, I have not made any changes to the config beyond what comes with the react template, which I will include below.
import { defineConfig } from 'vite'
import react from '#vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
base: "https://www.--fakeserverurl--.com/"
})
The css in question is missing altogether from the bundled CSS file. I'm probably missing something simple, but I really have looked all over the place with no success. Thanks in advance.
Related
Due to some limitations of using jQuery libraries, I need to import bootstrap 4 vanilla style into a couple of React projects. But I would like to create a single package that holds all the assets (such as importing BS4) and having the other React projects importing from this.
assets/package.json
"dependencies": {
"bootstrap": "^4.5.3"
}
index.js
import "bootstrap/dist/js/bootstrap.bundle"; //Does Work; Syntax is called importing with side effects, I believe
//import "bootstrap/dist/css/bootstrap.min.css"; //Unneeded, thanks to j1mbl3s pointing out we don't usually export CSS. I'm importing the CSS directly from the node_modules instead of the bundle
export * from "bootstrap/dist/js/bootstrap.bundle"; //Does NOT work
//export * from "bootstrap/dist/css/bootstrap.min.css"; //Unneeded, thanks to j1mbl3s pointing out we don't usually export CSS. I'm importing the CSS directly from the node_modules instead of the bundle
myReactApp1/package.json
"dependencies": {
"#bit/X.Y.Z.assets": "file./components/assets"
}
myReactApp1/App.js
import "#bit/X.Y.Z.assets" //Does NOT work
//import "bootstrap/dist/js/bootstrap.bundle"; //Does work; so essentially I want to replicate their export into my assets so that the version control is one central place
myReactApp1/App.scss
import "~#bit/X.Y.Z.assets/node_modules/bootstrap/scss/bootstrap" //Does work
How do I export a vanilla JS file in React, so that I can import it again?
What I'm trying to achieve is the following diagram, and respectively a non-compiling sandbox.
Describe the bug
In my React Typescript project, I am trying to use CSS modules. I created the project using create-react-app, added TypeScript later. Then I followed the instructions from the docs to setup CSS modules in the project
Added the plugin with npm install -D typescript-plugin-css-modules
Then updated tsconfig.json
{
"compilerOptions": {
"plugins": [{ "name": "typescript-plugin-css-modules" }]
}
}
I tried to run it but it didn't run. It complained about import statement here. Though the plugin docs say it shouldn't
So I added global.d.ts, which resolved the error
Now when I run it, the Home link on the header should be white. But I see the default color
To Reproduce
Go to https://codesandbox.io/s/summer-haze-ztnf6?file=/src/index.tsx
See the Link Home
Expected behavior
Home link color should be white
Since you already solved the issue, please have a look for description: problem in accessing the scss variables in react components
in a similar way you can access classes from the module scss files.
Never mind, changing the name of the scss file to header.module.scss fixed the issue.
I'm building a react component library (using typescript and styled-components) and I want to reuse as much as possible code between the two targets (web and native).
I have a folder called styled, and inside that folder, I have two index files: index.ts and index.native.ts.
Inside the index.ts I have: export { default as styled } from 'styled-components'; while in the index.native.ts I have export { default as styled } from 'styled-components/native';
I know react-native uses index.native.ts instead index.ts during the build process when it is available but I really need to make the IDE (vscode) to understand that, I mean, when I'm building a Button.native.ts the statement: import { styled } from '../styled' should import from the .native barrel and the ctrl + click should let us to the .native file.
I don't know if there is a configuration to change the default import file used as a barrel, I already tried to search in the typescript documentation for some react-native preset but I didn't find anything.
It is not related to TypeScript, it is an open issue on VSCode GitHub page. Still doesn't have any solution.
Even I didn't find solution on react native vscode plugin.
By my understanding you are working on RNW, so it is not a correct expectation that VSCode understand by Ctrl+CLICK your meaning is Web or Native side.When it works in development and production so forget about opening right code by click.
I'm looking to optimize my React folder structure.
It looks like this:
- components
- Header
- Header.tsx
- Header.styles.ts
- index.ts
The index.ts is just there to allow me to import the Header component with import { Header} from "components/Header. This works because I'm using babel-plugin-module-resolver. Now, since my folder name is always the same as the main file name inside my components folder, I would like to be able to import the header with import { Header } from "components" and have a Babel plugin resolve this to import { Header } from "components/Header/Header". This would mean I could remove the index.ts
Which Babel plugin can do this?
I'm already using babel-plugin-module-resolver to resolve the components folder. My problem is that i'm also using TypeScript so how do I tell the TypeScript compiler that this module is being resolved like this?
Please help me out. Thanks!
You should be able to just have your index.ts in your components take care of that normally. I don't think that this has anything to do with babel-plugin-module-resolver, it's just how index.ts/js files work in general. https://alligator.io/react/index-js-public-interfaces/
You should be able to get what you are looking for by doing the following in your index.ts file in your component directory:
You import your Header component and then directly export it.
import {Header} from './Header/Header'
export Header
Or you might be able to do a symmetrical export depending on your setup:
export {Header} from './Header/Header'
What is correct way to include BlueprintJS Css files to React-starter-kit?
I was able to do that in /src/components/Layout/Layout.js importing css file
import blueprintCss from '#blueprintjs/core/dist/blueprint.css';
and on export
export default withStyles(normalizeCss, blueprintCss, s)(Layout);
Is this correct way or is there another one like with webpack?
Thanks!
Simply import '#blueprintjs/core/dist/blueprint.css'; should include the CSS file in your webpack build.
I don't know enough specifics about react-starter-kit to tell you more, but the simple import statement above is the traditional approach.