I ejected my create-react-app in order to use css modules. I modified my webpack.config.dev.js from
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true, //added this
localIdentName: "[name]__[local]___[hash:base64:5]" //added this
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
}
Then I tried to uss css modules in one of my components
import React, { Component } from 'react';
import styles from './sidebar.css';
class MenuPanel extends Component {
render() {
return (
<div>
<div className={styles.navbarSide}>
<div className="tessact-logo"></div>
<div className="navbar-item active">
<a className="navbar-item-link"><span className="fa fa-comment"></span> TRIVIA</a>
</div>
But className navbarSide didn't get applied to div. I see no className for that particular div. What am I doing wrong? Ideally that div should have got className navbarSide.
just add import { StyleSheet } from 'react-native';
import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import styles from './sidebar.css';
class MenuPanel extends Component {
render() {
return (
<div>
<div className={styles.navbarSide}>
<div className="tessact-logo"></div>
<div className="navbar-item active">
<a className="navbar-item-link"><span className="fa fa-comment"></span> TRIVIA</a>
</div>
Related
I have a Svelte project using Tailwind, with this style in a component:
<style global lang="postcss">
input {
#apply block border-black border-2 mb-4 p-2 outline-none focus:border-blue-500;
}
</style>
The error that I'm getting, caused by the focus: class:
Semicolon or block is expected
My postcss.config.cjs file:
import tailwind from 'tailwindcss'
import tailwindConfig from './tailwind.config.cjs'
import autoprefixer from 'autoprefixer'
export default {
plugins: [tailwind(tailwindConfig), autoprefixer]
}
tailwind.config.cjs:
/** #type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {},
},
plugins: [],
content: ["./index.html", './src/**/*.{svelte,js,ts}'], // for unused CSS
variants: {
extend: {},
},
darkMode: 'media', // or 'media' or 'class'
}
vite.config.js:
import postcss from './postcss.config.cjs'
import { defineConfig } from 'vite'
import { svelte } from '#sveltejs/vite-plugin-svelte'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [svelte()],
css: {
postcss
}
})
I have the following Test component:
Test.css
.SomeClass {
background-color: blue;
width: 100px;
height: 100px;
}
Test.tsx
import React from 'react';
import './Test.css';
export const Test = () => {
return (
<div className={'SomeClass'}>
hello
</div>
);
};
Relevant section of webpack config:
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
sourceMap: !isProduction,
modules: {
localIdentName: '[local]',
},
},
}],
},
The problem is that the styles are not applied. On inspection, the div looks like this:
<div class="SomeClass">hello</div>
but there is no "SomeClass" css.
I suspect it is to do with some webpack config. I tried this too: use: ['style-loader', 'css-loader'] instead of the above use array, but no luck.
Edit
This project uses react-jss.
I have installed angular-fontawesome using the instructions here:
https://www.npmjs.com/package/#fortawesome/angular-fontawesome
The icons show up when used in this fashion (app.component.html):
<div style="text-align:center">
<!-- simple name only that assumes the 'fas' prefix -->
<fa-icon icon="coffee"></fa-icon>
<!-- ['fas', 'coffee'] is an array that indicates the [prefix, iconName] -->
<fa-icon [icon]="['fas', 'coffee']"></fa-icon>
<fa-icon [icon]="['fa', 'fa-fw', 'fa-book']"></fa-icon>
</div>
My app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import {BrowserAnimationsModule} from '#angular/platform-browser/animations';
import { NgModule } from '#angular/core';
import { HttpClientModule } from '#angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ButtonModule } from 'primeng/button';
import { MenuModule } from 'primeng/menu';
import { TabMenuModule } from 'primeng/tabmenu';
import { FontAwesomeModule } from '#fortawesome/angular-fontawesome';
import { library } from '#fortawesome/fontawesome-svg-core';
import { fas } from '#fortawesome/free-solid-svg-icons';
import { far } from '#fortawesome/free-regular-svg-icons';
import { TestcomponentComponent } from './testcomponent/testcomponent.component';
#NgModule({
declarations: [
AppComponent,
TestcomponentComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
HttpClientModule,
ButtonModule,
MenuModule,
TabMenuModule,
FontAwesomeModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
constructor() {
// Add an icon to the library for convenient access in other components
library.add(fas, far);
}
}
However, I get no icons when integrating it with a PrimeNg Module (in this case their TabMenuModule). Not doing anything unusual, just following the instructions here:
https://www.primefaces.org/primeng/#/tabmenu
app.component.ts
export class AppComponent {
title = 'ClientApp';
private items: MenuItem[];
ngOnInit() {
this.items = [
{label: 'Overview', icon: 'fa fa-fw fa-bar-chart'},
{label: 'Schedule', icon: 'fa fa-fw fa-calendar'},
{label: 'Documentation', icon: 'fa-coffee'},
{label: 'Support', icon: 'fa fa-fw fa-support'},
{label: 'Discussion', icon: 'fa fa-fw fa-twitter'}
];
}
I add these lines to top of the html:
<h3 class="first">Default</h3>
<p-tabMenu [model]="items1" [activeItem]="items1[0]"></p-tabMenu>
<h3>Templating</h3>
<p-tabMenu [model]="items2" [activeItem]="activeItem">
<ng-template pTemplate="item" let-item let-i="index">
<div style="position: relative; text-align: center; min-width: 10em">
<div class="ui-menuitem-icon" [ngClass]="item.icon" *ngIf="item.icon" style="font-size: 2em"></div>
<div class="ui-menuitem-text">
{{item.label}}
</div>
<a tabindex="0" class="ui-menuitem-icon" (click)="closeItem($event, i)" style="position: absolute; right: -1em; top: -.5em; padding: 0" *ngIf="i !== 0">
<span class="pi pi-times"></span>
</a>
</div>
</ng-template>
</p-tabMenu>
<p-tabMenu [model]="items"></p-tabMenu>
<i class="far fa-chart-bar"></i>
angular.json:
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/ClientApp",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/nova-light/theme.css",
"node_modules/primeng/resources/primeng.min.css",
"src/styles.css"
],
I am using:
Angular CLI: 8.0.2
Node: 10.15.3
OS: win32 x64
Angular: 8.0.0
angular-fontawesome#0.4.0
free-solid-svg-icons#5.9.0
free-regular-svg-icons#5.9.0
Try adding these css entries into your styles.scss file, that is what it took in my case.
#import "~primeicons/primeicons.css";
#import "~primeng/resources/themes/saga-blue/theme.css";
#import "~primeng/resources/primeng.min.css";
#import "~primeflex/primeflex.css";
I have the entry component in reactjs:
import React from "react"
import ReactDOM from 'react-dom';
import App from "./js/components/App.js"
import './index.css';
ReactDOM.render(<App />, document.getElementById('root'));
I am trying to style in the root element inside of my css file, index.css:
#root {
background-color: brown;
height:100vh;
width:100vh;
}
The background though is not brown. When looking at the styling the browser renders I cannot see any of these attributes being applied to the root element.
This is my webpack config:
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
},
{
test: /\.css$/,
use: ['css-loader'],
},
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
It is as if it is not loading the index.css file at all.
You cannot style the #root of your app. Just style the className of <App /> component, for example:
const App = () => (
<div className="app>
// ...
</div>
)
css file:
.app {
background-color: #ffffff;
background-color: brown;
height:100vh;
width:100vh;
}
When using webpack, i think you have to specify your entry points of your css/js files like this...
entry: [
"./src/js/index.js",
"./src/sass/style.scss",
],
output: {
filename: "bundle.js",
path: path.resolve(__dirname, 'assets/js')
},
module: {
rules: [
/* you code here */
...
...
I used create-react-app to create a very simple app. But the css is not working for me. Here's my code
# Test.css
.h1 {
color: white;
}
# Test.jsx
import React, { Component } from 'react';
import styles from './Test.css';
class Test extends Component {
render() {
return (
<div>
<h1 className={styles.h1}>Test!</h1>
</div>
)
}
}
export default Test;
The color of my h1 is still black not white. Any help will be appreciated!
# Test.css
.h1 {
color: white;
}
# Test.jsx
import React, { Component } from 'react';
import styles from './Test.css';
class Test extends Component {
render() {
return (
<div>
<h1 className={styles.h1}>Test!</h1>
</div>
)
}
}
export default Test;
In the project that I’m adding CSS Modules to we already have one loader defined for our JavaScript:
module: {
loaders: [{
test: /\.js$/,
loaders: ['react-hot', 'babel'],
include: path.join(__dirname, 'src')
}`enter code here`
}
webpack config
{
test: /\.css$/,
loader: 'style-loader'
}, {
test: /\.css$/,
loader: 'css-loader',
query: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}