I use next js and mycode like below
import styles from "../components/style/dark.module.scss";
export default function ThemeButton() {
return (
<div>
<button id="dark-mode-toggle" className={styles["dark-mode-toggle"]}>
</button>
<h1 className={styles["title"]}>
Title
</h1>
enter code here
</div>
);
}
Here I am creating an CSS module and importing it and using like above and it works fine.
But everytime I need to type className={styles["dark-mode-toggle"]} instead of just typing class="dark-mode-toggle" , I am migrating from plain html code to React and there are 1000's of class like this.
Is there any way to use class="dark-mode-toggle" and make styles work , without using global styles , I want the styles to be imported only when component is used to make my app lightweight.
You can use cmd + shift + H in VScode and replace all occurrences in the project.
Related
I have created a custom .scss file for Bulma with some custom colors I want to use in my app. They work in most Buefy components, except the Switch component...even though the docs say I should be able to use the type= attribute with my custom colors.
What am I doing wrong in importing the custom colors?
My bulma_custom.scss file
#import '../node_modules/bulma/sass/utilities/functions';
$mc-persimmon: #F65D2E;
$mc-persimmon-invert: findColorInvert($mc-persimmon);
$custom-colors: (
'mc-persimmon': ($mc-persimmon, $mc-persimmon-invert),
);
#import '../node_modules/bulma/bulma';
My main.js file
import App from '#/App.vue';
import 'buefy/dist/buefy.css';
import 'bulma/css/bulma.css';
import '#/bulma_custom.scss';
import '#/style.css';
etc. Vue.app etc.
My Switch component implementation
<b-switch type="is-mc-persimmon" :value="isOptedOut" #input="onToggleOptOut" :disabled="isLoading">
Opt Out
</b-switch>
In Chrome Devtools, the component's HTML
<label data-v-6e007ba7="" class="switch is-rounded">
<input type="checkbox" true-value="true" value="false">
<span class="check is-mc-persimmon"></span>
<span class="control-label">
Opt Out
</span>
</label>
In Chrome Devtools, the component's css - it's using buefy.css and didn't find the Bulma color
.switch input[type=checkbox]:checked + .check {
background: #7957d5; ## the Buefy default, NOT my color
}
I finally figured it out - instead of importing the buefy css file in main.js, I imported buefy in my bulma_custom.scss file. Somehow this way Buefy was able to overwrite the $form-colors with the additional custom colors instead of defaulting to the built-in ones.
GOOD: in scss file: #import "~buefy/src/scss/buefy";
BAD: in main.js: import 'buefy/dist/buefy.css';
I am using NextJS and TailwindCSS. For deployment i am using vercel. CSS and fonts are working if I use them directly in index.js file. CSS and fonts are not working if I use different component and import them in index.js file. But they are working fine on localhost. I dont really understand what I am doing wrong here. Here's my code.
// index.js
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import NameList from "../designs/NameList"
export default function Home() {
return (
<>
<NameList />
</>
)
}
// NameList.js
const NameList = () => {
return (
<div>
<div className="border-gray-400 border-2">
<h5 className="max-w-md mb-2 text-3xl font-heading font-extrabold leading-none sm:text-4xl">
<div className="flex">Name</div>
</h5>
</div>
</div>
)
}
export default NameList
If i return NameList divs in Home, everything is working perfectly on both local and production.
Yes, Moving all the necessary files to /components work. Simple tailwind comes with a 5Mb package. In order to minimize the file size it will remove all the unused CSS in the package in build time. And it will keep CSS included in the folders mentioned in tailwind.config.js. That's what happens in your code. You got two options.
You can move files to /components
Create a dedicated folder and include all the necessary files and then include the folder in tailwind.config.js
I moved my NameList.js file into /components folder. And everything is working as expected.
I have a Gatsby app with scss.
At the moment I have the following :
import React from "react";
import styles from "./mosaic.module.scss";
import Tile from '../tile/tile';
const Mosaic = (): JSX.Element => (
<section className="wrapper style1">
<div className="inner">
<h2 className="major">Smaller Projects</h2>
<p>Here under follow minor projects, often unfinished; I show them anyway because they helped me widen my experience. :)</p>
<section className={`${styles["features"]}`}>
{[0,1,2,3,4,5,6].map(e => <Tile key={e}></Tile>)}
</section>
</div>
</section>
)
export default Mosaic;
If I do not import class from the module like this className={${styles["features"]}} it will not work.
But as you can see some className still work with className="inner"
This is because under gatsby-browser.js I imported some global css like this
import "./src/styles/global.css"
The problem is, it's really confusing to know when a class should be called with styles or in the normal way.
Is there a way to just use the default way for everything ? or opposite ?
If you want regular global CSS, rename your file to mosaic.scss, import the file, and then apply your classNames as usual.
import "./mosaic.scss";
...
<section className='features'>...</section>
When you use the *.module.scss extension, you are actually telling gatsby-plugin-sass that you wish to use CSS Modules.
If you wish to use CSS Modules, then you have to do:
import styles from "./mosaic.css";
...
<section className={styles.features}>...</section>
or
import {features} from "./mosaic.css";
...
<section className={features}>...</section>
Edit: After your clarification in the comments, I don't think gatsby-plugin-sass or CSS Modules do what you want. You might have better luck looking for another tool to handle your css (eg stylable.io)
I created a custom modal, it also contains some SCSS.
In some cases, I need to use the modal twice (for different use case). Does Vue import the CSS twice or does Vue know I already imported the CSS?
<template>
<div>
<p-modal></p-modal>
<p-modal></p-modal>
</div>
</template>
How can I achieve changing backgrounds in Yii2? I am new to Yii2.
Here is something similar: codepen.io
Do I need to do it via CSS or should i do it via any Extensions ?
In view file make html structure like in your link, next you need to load css and js code. You can do it in few ways, but most simple is add it in the same view file like below:
<?php $cssContent = 'put css content here';
$this->registerCss($cssContent);
$jsContent = 'put your javascript content here';
$this->registerJs($jsContent);
?>
<div id="change-bg-image"></div>
<div id="change-bg-color">
</div>
You can do it via javascript, just change wrapper or document.body style.
The variable is for example there:
document.body.style.backgroundImage
Happy coding.
(you can declare array of links to images and do setInterval, also you can despite of document.body use for example document.getElementById("background") )