I use nextjs with rsuitejs.
in dev everything works fine.
after build the library css are not in the build directory,
so ugly page with no css.
i use css module with custom webpack config.
you can find the project here :
https://github.com/Temkit/rsuitejs-nextjs-example
i imported rsuitejs in the less file and it worked,
+ #import '~rsuite/styles/less/index';
h1 {
font-size: 25px;
font-weight: 600;
color: #424242cf !important;
padding-left: 12px;
}
the repository is correct now, if someone is facing the same problem check this example https://github.com/Temkit/rsuitejs-nextjs-example
thank you to simonguo
Related
I am working on a project with ReactJs, and I used media query to resize the width of my column on mobile. It works locally but it does not work on Netlify for some reasons that I don't know. What could be the cause of this?
Other CSS are working locally and on Netlify, but one is not working on Netlify it's only working locally. this one padding: 6px !important;
How do I fix this?
#media screen and (max-device-width:640px),
screen and (max-width:640px) {
.startingclass,
.endingclass {
font-size: 1.5vh !important; # this is working
}
p.card-text.text-center {
font-size: 1.9vh #this is working
}
.makeStyles-root-1 {
padding: 6px !important; # this one works locally but not working on Netlify
}
}
I just imported .css stylesheet in my component and the problem occured in generated file, it causes error like require.js:5 Uncaught Error: Script error for "src/Container.css", needed by: Container
folder structure
App
node-modules
src
Container.css
Container.jsx
dest
Container.css
Container.js
src - Container.jsx :
import './Container.css';
const Container = () => (
<div className="block"> // i know that here i can use like {style.block} if I do like import style from './Container.css';
<p className="message">Get started !!!</p>
</div>
);
ReactDOM.render(<Container />, document.getElementById('App'));
Container.css :
.block {
height: 100%;
margin-bottom: 0px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px -3px;
background: rgb(255, 255, 255);
border-width: 1px;
border-style: solid;
border-color: rgb(221, 221, 221);
border-image: initial;
padding: 15px;
}
.message {
color: #413b3b;
font-size: 18px;
}
I'm not sure how to import Container.css in my Container.jsx file and make it work and I'm using grunt-babel to transpiling jsx to js and require.js
.
So I am clearly stating that I'm not using webpack and css-modules. I know using css-modules is a wise way, but not sure how to implement without webpack.
I have imported my css stylesheet in my component and it causes when I run my application.I have implemented inline styling that's works but i want to know is there's any better ways to accomplish this.
Thanks in advance.
import containerStyles from './Container.css';
First Solution --->
Write inside render() -
let cls_block = `${containerStyles.block}`;
In html section-
className={cls_block}
Second Solution --->
className={containerStyles.block}
Got solution still answering here, it will help some people who needs to work react with grunt and babel. If you need to import your css file in your component like
import './Container.css';
you need this plugin : https://github.com/guybedford/require-css
by using this you can import it like :
import 'css!./Button_Styles.css';
this answer for people who are using grunt and require , not webpack and css-modules.
Why: I am dissecting another developers code to learn React
Where this was found: In a React app: On GitHib
Folder Structure: components > Button
Files Contained: index.jsx & styles.scss
What I think it means: It seems pretty obvious to me that this locks the scss styling to the local folder (specifically the element with the attribute of styleName = Button). However, I'm confused because I cannot find any other reference to this technique anywhere online. The closest thing I can find are articles talking about :export and :import.
What dependency allows this to happen?
Is this native to Sass?
Is this created by the dev to serve a specific purpose?
...and other such clarifying questions.
:local(.Button) {
background-color: #fff;
border: 0;
border-radius: 5px;
cursor: pointer;
color: #27466E;
padding: 7px 12px;
&:hover {
opacity: 0.8;
}
&:disabled {
opacity: 0.5;
}
}
I can't seem to find any documentation regarding using a different font in Angular Materials. Is this possible through the framework?
This is the official documentation on the subject, but it doesn't specify how to provide backup family classes if a font can't load:
https://material.angular.io/guide/typography
#import '~#angular/material/theming';
// Define a custom typography config that overrides the font-family as well as the
// `headlines` and `body-1` levels.
$custom-typography: mat-typography-config(
$font-family: monospace,
$headline: mat-typography-level(32px, 48px, 700),
$body-1: mat-typography-level(16px, 24px, 500)
);
// Override typography for all Angular Material, including mat-base-typography and all components.
#include angular-material-typography($custom-typography);
Edit; for backup font-families (notice the quoting):
$font-family: '"Sintony", Arial, sans-serif'
Edit; if you had a custom font in /assets
#font-face {
font-family: 'MyWebFont';
src: url('/assets/webfont.eot');
}
$font-family: '"MyWebFont", Arial, sans-serif'
Angular Material is implementation of Material Design and Material Design is strongly linked to Roboto font and as you mentioned, there is nothing about it in the documentation, so I think it is not possible to do that through the framework.
But you can easily change font family in css file, which needs to be included in your build after your Angular Material dependencies. Here's an example:
body {
font-family: "Comic Sans MS";
}
input,
button,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
And Demo: http://codepen.io/mattdanna/pen/pgwVzX
Borrowed from here: https://github.com/angular/material/issues/6561#issuecomment-170837189
I am building a react project and having some issues with scss variables.
Firstly I am NOT using css modules so please don't suggest that as a solution.
Essentially I am including styles in the component folder, but I also have global shared styles that exist in an app folder called styles.scss this includes imports for the scss variables, mixins etc that i'd like to use in the component files. I'm having issues sharing the variables, I tried importing the styles into navigation.js is that the correct way to do it? I'd love some advice.
The folder structure is like this (it has to be this way as it is an existing project that I cannot change so please no suggestions for restructuring)
> components
> button
> navigation
> navigation.scss
> navigation.js
> carousel
> app
> scss
> settings
> mixin.scss
> variables.scss
> index.js
> styles.scss
Styles.scss
#import '/scss/settings/variables';
#import '/scss/settings/mixins';
Variables.scss
$black: #000;
$white: #fff;
$fontsize: 16px;
navigation.scss
#import '../../app/scss/settings/variables';
.nav {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
justify-content: space-between;
position: relative;
background: $black;
color: $white;
}
Note: i'm using webpack to bundle my scss.