I am using css-loader and style-loader for my CSS but all media queries are not working. I am using "webpack": "^3.4.1", "css-loader": "^0.28.4" and "style-loader": "^0.18.2".
This is my Webpack configuration:
const ExtractTextPlugin = require('extract-text-webpack-plugin')
rules: [{
test: /\.css$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]-[local]-[hash:base64:6]',
camelCase: true
}
}]
}]
...
plugins: [
new ExtractTextPlugin({
filename: 'style.[chunkhash:6].css',
allChunks: true
})
]
My css file is something like this:
.container{
position: relative;
margin: 30px 15px;
padding: 50px 15px;
background: #fff;
}
#media (max-width: 768px) {
.container{
background: #fbfbfb;
}
}
and I am importing this CSS file in React code like this:
import styles from './Component.css'
try use this code
.container{
position: relative;
margin: 30px 15px;
padding: 50px 15px;
background: #fff;
}
#media only screen and (max-width:768px){
.container{
background: #c00;
}
}
<div class="container">
content her
</div>
I think that the problem is that you declared the ExtractTextPlugin, but you are using css and style loader instead.
Take a look at this setup for reference:
plugins
plugins: [
new ExtractTextPlugin({
filename: "css/bundle.css",
allChunks: true,
disable: process.env.NODE_ENV !== 'production'
}),
]
loader
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader?importLoaders=1'
})
}
This would use ExtractTextPlugin with production builds, and fallback to style-loader when using webpack-dev-server because ETP doesn't support hot reloading.
Feels so silly that I wasted as much time as I did, not getting why I was facing this same issue.
Just wanted to include it here for anyone else's reference as well...
Note, There could be other reasons for this issue as well.
My issue was that I hadn't added the meta tag w/ viewport.
FYR -
<meta name="viewport" content="width=device-width, initial-scale=1" />
Hope this helps.
Related
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 am trying to load a css file in my component .js file but while doing so I get this error :
ERROR in ./stories/styles.css
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
I have added following rule in my webpack.config.js file to take care of loaders but am still getting the error.
rules: [
{
test: /\.s?css$/,
use: ['style-loader', 'raw-loader', 'sass-loader', 'css-loader'],
include: [
path.resolve(__dirname, '../css/'),
],
},
My styles.css file looks like this:
.row {
display: flex;
flex-direction: row;
width: 100%;
}
.row.dark {
background: #303030;
}
.col {
width: calc(100% - 400px);
padding: 15px;
}
.row > .col:first-child {
border-right: 1px solid #ccc;
max-width: 400px;
}
Do I need to add any other loader ?
I even tried using import instead of require to get the styles.css file but it made no difference.
Webpack loaders get processed from right to left, you need to change the config to:
rules: [
{
test: /\.scss$/,
use: ['style-loader', 'raw-loader', 'css-loader', 'sass-loader'],
include: [
path.resolve(__dirname, '../css/'),
],
},
I am also unsure what the use of the raw-loader is here since it is used to loads files as a string - you might not need it
I may be missing something blatantly obvious, but for some reason when I try to nest sass rules, nothing renders. However, every other aspect seems fine.
In this case, hover isn't working.
jsx:
const SidebarSection = (props) =>
<div className={styles.sidebarPane}>
<ul className={styles.navList}>
<li className={styles.navElement}>{props.element}</li>
</ul>
</div>;
scss example rule:
.navElement {
cursor: pointer;
margin: .5rem 0 0 0;
&:hover {
color:yellow;
}
}
Webpack css/sccs loaders:
test: /\.(css|scss)$/,
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader',
options: {
modules: true,
},
}, {
loader: 'postcss-loader',
}
I am currently using webpack while developing React app with a NodeJS backend.
I am having trouble with styling the app because it seems webpack trying to do something with my css where it ends up changing the classnames.
For instance in my base.css file I have this:
body {
background: #ECEFF1;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
line-height: 1.7;
margin: 0 auto;
padding: 30px;
max-width: 980px;
}
.progress {
background-color: #FFECB3;
}
.progress .indeterminate {
background-color: #FFC107;
}
Which when I load the page and look in the head is converted to a <style> div with these classnames:
<style type="text/css">
body {
background: #ECEFF1;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
line-height: 1.7;
margin: 0 auto;
padding: 30px;
max-width: 980px;
}
.base---progress---1RR8Z {
background-color: #FFECB3;
}
.base---progress---1RR8Z .base---indeterminate---23sZH {
background-color: #FFC107;
}
So progress styles aren't being picked up on the page because they are changed into this format. How can I avoid this or have React change the class names appropriately?
If I removed this from my webpack config:
{
test: /\.css$/,
loader: 'style!css?modules&localIdentName=[name]---[local]---[hash:base64:5]'
}
Line it says that it can't find the css file but the path it errors out on is valid.
Webpack config for good measure:
'use strict';
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devtool: 'eval-source-map',
entry: [
'webpack-hot-middleware/client?reload=true',
path.join(__dirname, 'public/app/main.js')
],
output: {
path: path.join(__dirname, '/dist/'),
filename: '[name].js',
publicPath: '/'
},
plugins: [
new HtmlWebpackPlugin({
template: 'public/app/index.html',
inject: 'body',
filename: 'index.html'
}),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
})
],
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
"presets": ["react", "es2015", "stage-0", "react-hmre"]
}
}, {
test: /\.json?$/,
loader: 'json'
}, {
test: /\.css$/,
loader: 'style!css?modules&localIdentName=[name]---[local]---[hash:base64:5]'
}]
}
};
Your config currently uses css-modules. To disable it
change 'style!css?modules&localIdentName=[name]---[local]---[hash:base64:5]' to 'style!css' in the loader for css files.
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,
},
}