Im trying to setup an app using Muicss for styling my components in a React js app.
Below is the code of a very simple example but when I go to my browser the button has no style in it, and I don't know if I'm missing something, I used Material Design before and I had no issues.
import React from 'react';
import Button from 'muicss/lib/react/button';
export default class Example extends React.Component {
render() {
return (
<div>
<Button variant="raised" color="danger">button</Button>
</div>
);
}
}
Can someone help me to get if I'm missing something, I installed the library using NPM and inside my node_modules folder I can see all the files from the Muicss library.
In the console there's no error or something weird, the weird thing is that the components have no styles...
To use MUI React you must include the MUI CSS file in your HTML payload. It can be compiled into your app's CSS or added from the CDN:
<link href="//cdn.muicss.com/mui-0.9.30/css/mui.min.css" rel="stylesheet" type="text/css" media="screen" />
(source: MUICSS documentation)
I know this is old and as it doesn't mention it for future reference for passers-by it can be imported into scss using #import url("//cdn.muicss.com/mui-0.10.1/css/mui.min.css");
Muicss version: 0.10.2
Using the solution of Muicss Docs is ok but not well, because when a developer update muicss and do not update the given link, everything maybe ruins, now with the below solution it became very very better.
I have the same issue and fix it by adding sass-loader to Webpack and also I have CSS Modules so in the root of styles of my project I write just like below:
/* root file of styles.scss */
:global {
#import 'node_modules/muicss/lib/sass/mui';
}
After using this solution, even with hashed class name by using CSS Modules I gave the global names of muicss and every component works well.
Related
I've added parcel to a create-react-app project that uses the typescript template. I'm trying to add svgs to my outputted js file following the recommendations from their docs. I'm not sure if there's something that has to be done differently in TS, but I set up my project as they suggested as their JSX snippets and it didn't work:
.parcelrc
{
"extends": "#parcel/config-default",
"transformers": {
"jsx:*.svg": ["...", "#parcel/transformer-svg-react"]
}
}
Note: I've added the transformer plugin to my dev deps.
Component.tsx
import BriefcaseSvg from "jsx:../../assets/briefcase.svg";
// ...later in my return statement:
<img src={BriefcaseSvg} alt="work icon" />
// I've also tried
<BriefcaseSvg/>
Every time I get the following error:
Cannot resolve dependency 'jsx:../../assets/briefcase.svg'
I've also tried converting both jsx declarations to tsx.
I've added parcel on top of the standard webpack build tool you get with CRA. Wepback has no problem and displays the icon just find. Parcel also was able to run a build when I didn't include this svg plugin but outputted the svg separately in its own file.
I'd like everything to end up in one js file. How can I achieve this with parcel, react, and TS?
The default parcel config defines an svg transformer and optimizer, which are not properly resolving imports. You can follow the issue on GitHub at https://github.com/parcel-bundler/parcel/issues/7587.
As a workaround (for any type of import), you do not need to import a transformer.
Replace "jsx:" with "url:" in your import like this:
import BriefcaseSvg from "url:../../assets/briefcase.svg";
And use the src attribute, not a component.
<img src={BriefcaseSvg} alt="work icon" />
You can read more about the syntax at https://github.com/parcel-bundler/parcel/pull/4055. It only works in JS and was meant to support importing files that are not explicitly supported.
I asked myself this question but after some research on the internet I could not find any answer.
Something like this:
import './styles.css';
in this:
import "./styles.css";
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
Someone here to help me?
React doesn't. That transformation is performed by a bundler such as Parcel or Webpack which are tools designed to take web page dependencies and rewrite them into browser-compatible forms.
This is actually a feature of the bundler your React app is using, like Webpack. See how Webpack enables importing CSS.
The example on Webpack's documentation looks something like the below snippet (I made some changes for clarity). Keep in mind that Webpack does not know what JSX is (that is Babel's job), so this uses vanilla DOM nodes.
src/style.css
.hello {
color: red;
}
src/index.js
import './style.css';
function myComponent() {
const element = document.createElement('div');
element.innerHTML = 'Hello World';
element.classList.add('hello');
return element;
}
document.body.appendChild(component());
When you build your React application, Webpack takes all the styles in src/style.css, minifies them, and appends a link to the minified stylesheet inside the head tag of build/index.html.
So in your build/index.html, you would see something like the below link tag. You can also see this in the DOM with your inspector when you start the application.
build/index.html
<!doctype html>
<html lang="en">
<head>
...
<link href="/static/css/main.ac7c7319.chunk.css" rel="stylesheet">
...
</head>
<body>
...
</body>
</html>
Of course the above file will also be minified, so it will not be so easy to read.
This is all made possible through Webpack's dependencies: style-loader and css-loader.
Closing thoughts
It is worth noting that CSS is never actually imported into JavaScript. As Create React App's documentation explains,
Webpack offers a custom way of 'extending' the concept of import beyond JavaScript.
So it is not actually a real import at all (which normally functions like require()).
The officially recommended way to customize / theme bootstrap is by overriding the bootstrap variables using sass. But how do I do this, or rather, how do I add this part of the process into the Vue webpack workflow ?
Googling led to try editing the vue.config.js file to add scss loader into webpack but I am unable to find the required file.
This is the directory structure
I have used vue-cli v3.4 to setup the project.
I am using vanilla bootstrap and not the bootstrap-vue components.
Make a file called custom.scss. Go into the node_modules/bootstrap/scss directory and copy everything from _variables.scss. Paste these into your custom.scss.
In your style.scss import your custom.scss before you import bootstrap.scss.
Now in your main.js import #/assets/style.scss.
You will need to remove the !default flag from any variables you wish to override in your custom.scss for them to take effect, as well.
Create a file /css/bootstrap-custom.scss, with the following:
// your variable overrides
// modify theme colors map
$theme-colors: (
"primary":#42b883,
//...other variables, you can find them in node_modules/bootstrap/scss/_variables.scss
);
// import to set changes
#import "~bootstrap/scss/bootstrap";
In the main script, import the added file instead of the current imported bootstrap css file:
// import '../node_modules/bootstrap/dist/css/bootstrap.css';
import '#/css/bootstrap-custom.scss';
Reference: Bootstrap, Variable defaults
I'm starting a very basic build.
I'm using `create-react-native-app' and yarn for pm.
From there all I have tried to accomplish is to load in 'native-base' for some UI elements.
From the app.js file the only thing I've added is a Button Component from native-base.
<Button> <Text></Text> </Button>
And have included native-base.
After receiving some errors that it couldn't resolve module '#expo/vector-icons' I went and installed #expo/vector-icons, and for the hell of it ran react-native link.
Now it can find #expo/vector-icons but it can't find the fonts starting with Ionicons.ttf.
SO. From there I downloaded all the fonts to a assets/fonts/ directory and then included this in my app.js file based off some documentation I found on the expo site.
import { Font } from 'exponent';
///
export default class App extends React.Component {
componentDidMount() {
Font.loadAsync({
'ionicons': require('./assets/fonts/Ionicons.ttf'),
});
}
///
They way I load custom fonts is by adding them in the Info.plist file as a list of Font provided by the application:
And they also need to be in the provided resources of the Build Phases:
After that, you can use it in the fontFamily property in CSS in react native. Make sure you also clean and build the project again after adding the fonts so they are copied to the device.
The question is simple although the approach can vary.
First I am using the following:
1 - Webpack
2 - Babel
3 - ES6
4 - npm
I have the module Bootstrap included but can't figure out how to call the JS file via import
This is how I'm approaching it:
import Bootstrap from 'bootstrap'; and that doesn't work so my first problem is not being able to access bootstrap so i can't even begin to figure out how to access the bootstrap.js file.
The second approach was to scrap the idea of accessing Bootstrap from the node-modules folder and just add bootstrap.css and bootstrap.js to the src directory in my React build.
What I then tried was to access bootstrap css like this:
import './css/bootstrap.css'; and that works fine.
But when i attempt to import, bootstrap.js like this import './js/bootstrap.js I get an error when React tries to compile.
The image above shows how I'm trying to import my local JS file.
Any ideas what I'm doing wrong.
I would love either a solution using the bootstrap module (which is cleaner so I don't have to manually include) but would also like to know how to manually include as well.
Thank you.
You need to use the bootstrap WebPack package.
https://github.com/gowravshekar/bootstrap-webpack