How can I add global CSS in nuxt 3?
Is there any CSS property like in nuxt 2?
nuxt2.config
export default {
css: [
'#/assets/css/main.scss'
]
}
You can specify global CSS in your nuxt.config.ts|js like this:
export default defineNuxtConfig({
css: [
'#/assets/css/main.scss',
],
})
See: https://v3.nuxtjs.org/api/configuration/nuxt.config#css
Related
I want to disable a class like list-item.
I can disable corePlugins.display in configuration file, but how can i disable the list-item only.
Add the class to the blocklist in your tailwind.config.js:
module.exports = {
blocklist: [
'list-item',
],
// ...
}
See discarding classes in the Tailwind docs
How can I remove this via css or another method? Shadow CSS does not let me do this on an easy way.
I want to remove it for each page (global)
You can give a config object to Ionic in your app's main modules (assuming Angular):
import { IonicModule } from '#ionic/angular';
#NgModule({
...
imports: [
BrowserModule,
IonicModule.forRoot({
backButtonText: '' // Set an empty string to have no text next to the back icon
}),
AppRoutingModule
],
...
})
Full documentation : https://ionicframework.com/docs/angular/config#global-config
The way to remove "ion-back-button's text" from IOS via attribute is to add inside the ion-back-button tag text="none"; so you will have <ion-back-button text=""><ion-back-button>
I am using customize-cra to override antd less variable but it creates multiple duplicate CSS files on build.
As mentioned in antd docs https://ant.design/docs/react/use-with-create-react-app#Advanced-Guides
if I use default import of CSS like this
#import '~antd/dist/antd.css';
it produces only 1.5MB(Including my custom CSS) of CSS files after the build.
Then I remove #import '~antd/dist/antd.css';
And i used customize-cra , like this code.
const { override, fixBabelImports, addLessLoader } = require('customize-cra');
const overrideVariables = require('./src/styles/overrideVariables');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: overrideVariables,
}),
);
This produces 6MB(Including my custom CSS) for CSS files after the build.
Am I am using it wrong or any other solution for this?
I'd recommend using craco. There is craco-antd plugin that works great and does exactly what you need.
craco.config.js
module.exports = {
plugins: [
{
plugin: require('craco-antd'),
options: {
lessLoaderOptions: {
noIeCompat: true
}
}
}
]
};
And then you can add your variables in antd.customize.less
#primary-color: #1da57a;
#link-color: #1da57a;
I am learning react and trying to set the style of a react-router-dom NavLink encapsulated inside a material-ui Button. I am using React with Typescript and a custom Webpack build.
The documentation states that this can be achieved by setting the activeClassName property.
In the code listing below I try setting the activeClassName on the button containing the NavLink component.
import * as navbar from './NavBar.css';
const NavBarLinks = () => (
<>
<Button
color="inherit"
component={NavLink}
activeClassName={navbar.highlighted}
to="/about"
>
About
</Button>
</>
);
The highlighted css class is as follows:
.highlighted {
border-bottom: 3px solid rgb(174, 185, 28);
}
However, no bottom border is rendered. How do I get the activeClassName style to render for a react-router-dom NavLink rendered within a material-ui Button within a Typescript environment?
My build environment is configured as follows.
I have created a type declaration file for the stylesheet
and saved this in a folder referenced in tsconfig.json.
export const active: string;
export const horizmenu: string;
export const highlighted: string;
My tsconfig.json includes the typesRoot configuration. This references the types folder where my css type declaration file is stored:
"typeRoots": ["node_modules/#types", "src/types"]
My webpack development configuration is using css-loader to bundle css files under src/app/*/
{
// link css modules
test: /\.css$/,
include: path.resolve(constants.dir.SRC, 'app'),
use: [
{ loader: require.resolve('style-loader') },
{
loader: require.resolve('css-loader'),
options: {
modules: {
localIdentName: '[path][name]__[local]___[hash:base64:5]',
},
importLoaders: 1,
sourceMap: true,
},
},
],
},
...
When I perform a Webpack development build I can see that the NavBar.css contents are picked up by the css-loader and embedded as a string in the bundle file.
What you have should work, but you are passing a class name, not a style, so I think you just need to make your activeClassName prop equal to "highlighted".
<Button
color="inherit"
component={NavLink}
activeClassName="highlighted"
to="/about"
>
About
</Button>
You'll also need to add !important to you style so it overrides the CSS of the Material UI button.
Working codesandbox link
I have setup my own react project from some tutorials including my own webpack configuration. When I try to style elements it is able to apply style to generic html tags such as <body> or <p> but it fails when I try to style classes/ids.
I know my css file is being imported because it styles the generic tags.
Webpack Config
{
test: /\.css$/,
use: [
"style-loader",
{
loader:"css-loader",
options:{
modules:true
}
}
]
}
CSS
.oakResults {
font-size:20px;
}
#yoyoyo {
color:red;
}
p {
color:orange;
}
React
<div className='oakResults'>
<p id='yoyoyo'>Results</p>
</div>
In my example, the <p> is colored red, but .oakResults font does not change and when I comment out the <p> style it doesn't turn red.
I want it to be able to style to both generic tags and classes/ids.
I think the reason of this issue is you have enable the css modules in webpack but not referring the css correctly.
So if you don't need the css module, try to remove options:{ modules:true} from your webpack config. Then the css could be applied to the class name you set in ReactJS.
Or if you do need the css module, keep the Webpack config. But modify your ReactJS to something like this:
import React, { Component } from 'react';
import styles from 'path\to\file.css';
class foo extend Component {
render() {
return (<div classname={styles.oakResults}> This is the test component</div>)
}
}
Hope it helps.
You should try this,
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
From the docs,
The modules option enables/disables the CSS Modules specification and setup basic behaviour.
Using false value increase performance because we avoid parsing CSS Modules features, it will be useful for developers who use vanilla css or use other technologies.
Refer more about CSS Modules.