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 */
...
...
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'm trying to use webpack with postcss to import a theme-variables.css file that contains my css custom variables.
//theme-variables.css
:root {
--babyBlue: blue;
}
Basically I want any css that imports theme-variable to be able to access these css custom properties and resolve to static values using postcss-css-variables.
//style.css
#import "./theme-variable.css";
div {
display: flex;
color: var(--babyBlue);
}
becomes
//main.css
div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
color: blue;
}
However I keep getting webpack errors variable --babyBlue is undefined and used without a fallback
main.js ends up looking like this:
:root {
--babyBlue: blue;
}
div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
color: undefined;
}
Here's my webpack (index.js requires styles.js):
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: { main: "./src/index.js" },
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{
loader: "css-loader",
options: { importLoaders: 1 }
},
{
loader: "postcss-loader",
options: {
ident: "postcss",
plugins: loader => [
require("postcss-css-variables")(),
require("postcss-cssnext")(),
require("autoprefixer")(),
require("postcss-import")()
]
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "[name].css",
chunkFilename: "[id].css"
})
]
};
Solution:
The postcss-import plugin has to come first HOWEVER the plugins for Postcss-loader does not go in reverse order like webpack loaders do.
This fixes it:
loader: "postcss-loader",
options: {
ident: "postcss",
plugins: loader => [
require("postcss-import")()
require("postcss-css-variables")(),
require("postcss-cssnext")(),
require("autoprefixer")(),
]
}
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]'
}
}
I'm learning about CSS Modules at the moment, and they look like they will solve a lot of problems. But all the documentation is based on CSS, I want to use SASS.
Is this possible? For example, how could I make the following statement work?
.normal {
composes: common;
composes: primary from "../shared/colors.scss";
}
./scss/import.scss
.myImportClass {
background-color: #f00
}
./scss/style.scss
.btn {
padding: 20px;
border: 1px solid #000;
}
.newBtn {
composes: btn;
composes: myImportClass from './import.scss';
border: 5px solid #f00;
}
module part in your webpack.config.js
module: {
rules: [
{
test: /\.scss/,
use: [
{
loader:'style-loader'
},
{
loader: 'css-loader',
options: {
sourceMap: true,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]'
}
},
{
loader: 'sass-loader'
}
]
}
]
}
Your teststyle.js (ES6 / ES7):
import React from 'react';
import style from './scss/style.scss';
const TestStyle = () => {
render() {
return (<div>
<button className={style.newBtn}>my button</button>
</div>)
}
}
default export TestStyle;
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack CSS composes</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
entry point app.js
import React from 'react';
import TestStyle from './teststyle';
React.render(
<TestStyle />,
document.getElementById('app')
);
// UPDATE
convert webpack config to webpack 3
make teststyle.js a stateless function
it's a problem of css-loader, try to add the option importLoaders: 1, in css-loader webpack config (https://webpack.js.org/loaders/css-loader/#importloaders)
{
loader: "css-loader",
options: {
modules: true,
importLoaders: 1,
},
}