I am trying to import global css file inside react javascript file. I am importing in following way:
import React from "react";
import MainWrapper from "./components";
import "./global.css";
const App = () => {
return (
<MainWrapper />
);
};
export default App;
My global.css file looks like following:
#import '/node_modules/antd/dist/antd.css';
i.anticon.anticon-menu-unfold.trigger, i.anticon.anticon-menu-fold.trigger {
margin: auto;
display: flex;
justify-content: center;
padding: 12px;
color: white;
}
i.anticon.anticon-menu-fold.trigger{
float: right;
}
Here above, I am overidding predefined css of ANT Design. Here it is not able to override ant's predefined css.
My webpack.config.js looks like following:
const HtmlWebPackPlugin = require("html-webpack-plugin");
const WebapckManifestPlugin = require("webpack-manifest-plugin");
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: [
"#babel/preset-env",
"#babel/preset-react"
],
plugins: [
"#babel/plugin-syntax-dynamic-import",
"#babel/plugin-proposal-class-properties"
]
}
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
},
// {
// test: /\.css$/,
// use: [
// "style-loader"
// ,
// "css-loader"
// ]
// },
{
test: /\.css$/,
use:
[
{
loader: "style-loader",
},
// {
// loader: "isomorphic-style-loader",
// },
{
loader: "css-loader",
options: {
importLoaders: 1,
modules: {
localIdentName: "[name]__[local]___[hash:base64:5]"
}
}
}
]
},
{
test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
loader: "url-loader?limit=100000" }
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./public/index.html",
filename: "./index.html"
}),
new WebapckManifestPlugin({
template: "./public/manifest.json"
})
],
resolve: {
extensions: ["*",".js",".jsx"]
}
}
However, look below. I am importing css file in below js file. It works
import React, { useState } from "react";
import { Layout, Menu, Icon } from "antd";
// import useStyles from 'isomorphic-style-loader/useStyles'
import style from "./style.css";
const Dashboard = () => {
// useStyles(style);
return(
<div className={style.dashboard}>
karan
</div>
);
};
export default Dashboard;
My style.css file looks like this:
.dashboard{
text-align: center;
}
I think the problem is with webpack.config.js.
When I change style syntax from:
className={style.dashboard}
To:
className="dashboard"
And import statement from:
import style from "./style.css";
To:
import "./style.css";
And webpack.config.js test: /.css$/ to:
{
test: /\.css$/,
use: [
"style-loader"
,
"css-loader"
]
}
Everythings works then.
Related
When working with scss modules in typescript environment, my modules are stored in a property called default
Button.style.scss
.button {
background-color: black;
}
index.tsx
import * as React from 'react';
import * as styles from './Button.module.scss';
console.log(styles);
export const Button = () => (
<button className={styles.default.button}>Hello</button>
);
Console.log output
Module {__esModule: true, default: {button: "_2t432kRILm79F3WhLGdN6N"}, Symbol(Symbol.toStringTag): "Module"}
Why is that ? I cannot properly generate types with typed-scss-modules because of that.
EDIT:
Storybook config is
const path = require('path');
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.#(js|jsx|ts|tsx)'],
addons: ['#storybook/addon-links', '#storybook/addon-essentials'],
webpackFinal: async (config) => {
config.module.rules.push({
test: /\.scss$/,
use: ['style-loader', 'css-loader?modules=true', 'sass-loader'],
include: path.resolve(__dirname, '../'),
});
return config;
},
};
You need to adjust your css-loader rule to have the "esModule": false option, like follows:
{
loader: 'css-loader',
options: {
esModule: false,
}
},
{
loader: 'sass-loader',
}
This ensures import statements will return just the string, only
I'm trying to setup css modules with postcss + cssnext. It all seems to be working fine, except that the composes keyword is simply not working. The rule vanishes when the bundle is compiled.
Here's my webpack config file:
'use strict'
const path = require('path')
const webpack = require('webpack')
const HtmlPlugin = require('html-webpack-plugin')
module.exports = {
devtool: 'inline-source-map',
entry: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
path.join(__dirname, 'src', 'index')
],
output: {
path: path.join(__dirname, 'dist'),
filename: '[name]-[hash].js',
publicPath: ''
},
plugins: [
// new DashboardPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new HtmlPlugin({
title: 'Github App',
template: path.join(__dirname, 'src', 'html', 'template-dev.html')
})
],
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
include: /src/,
use: 'babel-loader'
}, {
test: /\.css$/,
exclude: /node_modules/,
include: /src/,
use: ['style-loader', {
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[local]--[hash:base64:5]'
}
}, {
loader: 'postcss-loader',
options: {
ident: 'postcss'
}
}]
}]
},
resolve: {
alias: {
Src: path.join(__dirname, 'src'),
Components: path.join(__dirname, 'src', 'components')
}
}
}
I'm using style-loader for this dev environment so I can use hot reloading. The css file is being imported like this: import './app.css'
app.css:
:global{
.app {
float: left;
padding: 10px;
width: 100%;
}
}
.className {
color: green;
background: red;
}
.otherClassName{
composes: className;
color: yellow;
}
this results in:
My postcss.config.js file:
module.exports = {
plugins: {
'postcss-import': {},
'postcss-cssnext': {
browsers: ['last 2 versions', '> 5%']
},
'postcss-nested': {}
}
}
Am I missing something to get composes to work?
Looks like this is fine:
The implementation of webpack's css_loader is to add both classes when exporting the styles (see https://github.com/webpack-contrib/css-loader#composing)
This also makes more sense, since it will ultimately render out less CSS code.
Try importing the styles and apply them to an HTML node and you will see it should receive both classes.
In your example it would have done something like:
exports.locals = {
className: 'className-2yqlI',
otherClassName: 'className-2yqlI otherClassName-1qAvb'
}
So when you do:
import styles from '../app.css'
// ...
<div className={styles.otherClassName} />
The div gets both classes.
I've installed bootstrap using
npm install bootstrap#4.0.0-alpha.6 --save
in my dependencies I have:
"dependencies": {
"bootstrap": "^4.0.0-alpha.6",
"react": "^15.6.1",
"react-dom": "^15.6.1"
}
in my styles.scss
#import '~bootstrap/scss/bootstrap';
and here's my webpack file:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
inject: 'body'
})
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/dist',
filename: 'build.js'
},
devServer: {
historyApiFallback: true
},
module: {
loaders: [
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ },
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader?importLoaders=1&modules&localIdentName=[name]_[local]_[hash:base64:5]',
'sass-loader',
],
}
]
},
plugins: [HtmlWebpackPluginConfig]
}
but when I add container class in my header component
import React from 'react';
export class Header extends React.Component {
render() {
return(
<header className="container">header here</header>
);
}
}
export default Header;
it looks like this:
and in build.js I can't find .container class. .row as well etc.
inside bootstrap.scss>>import grid container looks this:
#if $enable-grid-classes {
.container {
#include make-container();
#include make-container-max-widths();
}
}
and in _variables.scss inside bootstrap this variable is true
$enable-grid-classes: true !default;
so what's wrong?
You have to import your .scss file in your component and apply in html. Like:
import React from 'react';
import styles from './styles.scss'; // your .scss file
export class Header extends React.Component {
render() {
return(
<header className={styles.container}>header here</header>
);
}
}
export default Header;
I'm using Grommet as a UI Framework for my React page. For web components not covered by Grommet (e.g. a web chat control) what is the easiest way to style the additional web components not covered by the Grommet CSS. Would I just add my own custom.scss?
#import "includes/colors";
#import "includes/settings";
#import "includes/card-size";
webchat {
body .wc-app, .wc-app button, .wc-app input, .wc-app textarea {
font-family: 'Segoe UI', sans-serif;
font-size: 15px;
}
...
}
In my app.js file I have the folllowing import call...
import webachatcss from '../app/custom.scss';
Then under render() I have the following code
<Chat classname='webchatcss' directLine=.... />
UPDATE: I have installed the SASS-loader and updated my webpack.config.js which now looks like this (rules section is the latest change).
var path = require('path');
var webpack = require('webpack');
module.exports = {
context: path.join(__dirname, 'app'),
entry: ['./index.html','./app.js'],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.html$/,
loader: "file-loader?name=[name].[ext]",
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
rules: [{
test: /\.scs$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader"
}]
}]
},
{
test: /\.png$/,
loader: "url-loader?limit=100000"
},
{
test: /\.jpg$/,
loader: "file-loader"
}
],
},
resolve: {
alias: {
react: path.resolve('node_modules/react'),
},
},
devServer: {
historyApiFallback: true
}
};
The location of my error has now changed with the error now appearing in the scss (which appears to be a step closer). However I still get the error "You may need an appropriate loader to handle this file type"
You can import css files to your code and use those styles or you can create styles with react.
import '/path/to/your/css/style.css';
// and on your component
<WebChat className="webchat" />
// or
const styles = {
webchat: {
fontSize: 14,
color: '#303030'
}
};
<WebChat style={ styles.webchat } />
I can't figure out how to render css with the webpack sass-loader.
App.js file:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Test from "./Test";
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<Test />
</div>
);
}
}
export default App;
Test.jsx file:
import React, { Component } from 'react';
import './Test.scss';
class Test extends Component {
render() {
return (
<p className="intro">
Test
</p>
);
}
}
export default Test;
Test.scss file:
.intro{
background-color: #dddddd;
color: red;
}
webpack.config.dev.js file:
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
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',
}),
],
},
},
],
},
{
test: /\.scss$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
}
Image:
Result
Expected
I'm doing something wrong with the sass loader. What is it? Please help.
{
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
/\.scss$/,
/\.json$/,
/\.bmp$/,
/\.gif$/,
/\.jpe?g$/,
/\.png$/,
],
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
}
I added /.scss$/ here, the code is running successfully, thank you all
This is how I use sass-loader together with the help of extract-text-webpack-plugin to create a separate file instead of just including it to bundle.js file.
I'm using webpack v2.6.1
// webpack-config.js
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module: {
rules: [
{ test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader']}) },
{ test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'sass-loader']}) },
],
},
plugins: [
new ExtractTextPlugin('[name]-[chunkhash].css'),
]
and import it to my index.js, like so:
import '../public/assets/sass/style.scss';